开发者社区> 黄威的世界> 正文

css 列表 hover时闪动

2016-05-11 2597

简介：

+关注继续查看

css 列表 hover时闪动

选中事件:

Js代码  
//企业列表增加单击事件  
    $('.company-name').on('click','li.enabled',function () {  
        var $self=$(this);  
        $('.company-name li.li-active').removeClass('li-active').removeClass('enabled_hover').addClass('enabled');  
        $self.removeClass('enabled').addClass('li-active').addClass('enabled_hover');  
  
    });  

为什么要使用这种方式?

另外一种方式(方式二):

Js代码  
$('.company-name li.enabled').click(function () {  
        var $self=$(this);  
        $('.company-name li.li-active').removeClass('li-active').removeClass('enabled_hover').addClass('enabled');  
        $self.removeClass('enabled').addClass('li-active').addClass('enabled_hover');  
  
    });  

为什么不使用方式二呢?

因为刚开始初始选中的item的class 是"li-active enabled_hover",没有"enabled"

使用方式二时,没有给初始选中的item增加事件

hover时闪动的原因是原来item的border 粗细为1px,hover时border 粗细变为2px,那么item的宽高就有变化,所以导致闪动

解决方法:

hover时宽和高分别减少2px,css如下:

没有hover时的样式:

Css代码  
.company-name li{ width:258px; height:30px; line-height:30px; color:#333; border:1px solid #dfdfdf; border-radius:2px; margin-bottom:10px;  
                  text-align: center;  
    padding:0px 1px;  
}  

高度为30px,并且左右的padding分别为1px

hover时的样式:

Css代码  
/* hover时,高度减少两个像素 */  
.company-name li.enabled:hover,.company-name li.enabled_hover{  
    border:2px solid #ff4646;  
    height: 28px;  
    line-height: 28px;  
    padding:0px 0px;  
}  

如上,高度共减少了2px,左右的padding分别减少1px,达到目的

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

前端开发 JavaScript

CSS hover CSS列表

开发者社区 > 开发与运维 > 文章

云迁移中心

作者高分内容

更多

[工作流]一个任务的一辈子 186 设计模式-状态机模式 5704 使用gradle构建java项目(1) 1665 设计模式-观察者模式 1237 单点登录的一种常规方法 974

相关文章

前端技术栈

css样式的优先级+ 伪类选择器:hover+选择器

css样式的优先级+ 伪类选择器:hover+选择器

33 0

程序边界

【笔记】纯css实现列表水平滑动（图片或文字内容不限）

纯css实现列表水平滑动（图片或文字内容不限）

55 0

MiyueFE

✨✨做一个伪3D效果的卡片列表来复习一下CSS动画吧~

✨✨做一个伪3D效果的卡片列表来复习一下CSS动画吧~

65 0

游客rwfdzeltumt5s

零基础CSS入门教程(11)——无序列表样式

我们本小结学习了无序列表样式，我们用到最多的就是 list-style-type: none;去掉列表的默认格式，我们要熟练使用。我们再html里面有无序列表和有序列表，那我们这一小节学习一下列表样式,并熟练掌握。

23 0

卖坚果的怪叔叔

八种让人眼前一亮的CSS HOVER效果~

八种让人眼前一亮的CSS HOVER效果~

26 0

卖坚果的怪叔叔

CSS实现 Tab hover 下划线跟随

CSS实现 Tab hover 下划线跟随

39 0

bqospzg5rfs7g

CSS 属性_列表、表格 | 学习笔记

快速学习 CSS 属性_列表、表格

50 0

低代码布道师

详解CSS中的网格布局，小程序中实现预约列表功能

详解CSS中的网格布局，小程序中实现预约列表功能

43 0

晚来南风晚相识

css动画京东小布hover放大

css动画京东小布hover放大

47 0

晚来南风晚相识

css hover频繁闪烁

css hover频繁闪烁

276 0

+关注

黄威的世界

我是一个热衷IT技术的人，希望自己不断地设计开发出对别人非常有用的软件。有近7年的java开发经验(包括2年Android开发经验)和一年左右的linux使用经验。擅长Java Web后台开发，喜欢研究新的各种实用技术

文章

问答

视频

作者高分内容

更多

[工作流]一个任务的一辈子 186 设计模式-状态机模式 5704 使用gradle构建java项目(1) 1665 设计模式-观察者模式 1237 单点登录的一种常规方法 974

文章排行榜

最热

最新

1 「开源人说」第五期 | KubeVela：一场向应用交付标准的“冲锋” 199279

2 一个业务前端关于成长的心路历程 64242

3 C语言 | 数据结构—约瑟夫环问题 58995

4 快速开发光伏电站数字孪生运维系统（一） 44683

5 使用 DataAnnotations（数据注解）实现模型的通用数据校验 43167

6 阿里云智能语音交互产品测评：基于语音识别、语音合成、自然语言理解等技术 41957

7 一文深度解读音视频行业技术发展历程 35748

8 Hive数据倾斜的原因以及常用解决方案 33200

9 高并发编程之阻塞队列 32762

10 Java的Stream操作详解 31673

11 Spring 事务【隔离级别与传播机制】 30516

12 性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率 29515

13 计网之初识网络(理解网络传输的基本流程) 28031

14 Android体系课之--LeakCanary内存泄露检测原理解析 25947

15 零基础快速开发Vue图书管理系统—登录注册篇（一） 22692

16 IoT设备数据的存储、解析和价值挖掘实践 22661

17 【实战企业级Java二】渐进式理解Redis分布式锁 22540

18 IoT Studio 物联网可视化应用搭建开发实践 21328

19 虚拟数字人之《手语翻译官》的技术实践 19510

20 实现人机协同高稳定性，阿里云5G专网IoT方案入选工信部优秀解决方案 54136

1 OpenSearch上线实时热搜、个性化底纹功能 58

2 ChatGpt与EdgeGpt 129

3 JAVA中如何高效的实现SQL的like语法? 5843

4 RocketMQ x OpenTelemetry 分布式全链路追踪最佳实践 75

5 这才叫开箱即用！ 491

6 运维工程师工作时最常用的20个Linux命令有哪些？建议收藏 17678

7 玖章算术CEO叶正盛在杭州人工智能小镇AIGC论坛发表主题演讲 86

8 Linux基础IO【文件理解与操作】 16877

9 Flink 流批一体方案在数禾的实践 7444

10 超丰厚奖池｜天池达人积分榜，有你而不凡！ 187

11 今天出门你查老黄历了吗？包括万年历在内的超多免费可用 API 推荐（一） 103

12 关于几天前出的 MinIO 敏感信息泄露漏洞，分享两种扫描方法 219

13 五分钟！获得轻量级的云原生应用控制平面 169

14 域名资讯 - XYZ注册局域名报告-2023年2月 70

15 数据备份浅谈 145

16 ChatGPT软件技术栈解密 91

17 阿里云com和cn域名注册代金券免费领取 95

18 灵魂一问：一个Java文件的执行全部过程你确定都清楚吗？ 59

19 简要聊聊UNIX,MINIX,LINUX,BSD的区别与特质 27377

20 Flink Table Store 独立孵化启动，Apache Paimon 诞生 537

相关课程

更多

前端开发CSS基础

4161

21

去学习

零基础学前端HTML+CSS

8763

57

去学习

CSS 快速掌握

19103

49

去学习

相关电子书

更多

零基础CSS入门教程

立即下载

低代码开发师（初级）实战教程

立即下载

阿里巴巴DevOps 最佳实践手册

立即下载

相关实验场景

更多