css 列表 hover时闪动

css 列表 hover时闪动

 

选中事件:

Js代码  

1. //企业列表增加单击事件  
2.     $('.company-name').on('click','li.enabled',function () {  
3.         var $self=$(this);  
4.         $('.company-name li.li-active').removeClass('li-active').removeClass('enabled_hover').addClass('enabled');  
5.         $self.removeClass('enabled').addClass('li-active').addClass('enabled_hover');  
6.   
7.     });  

 为什么要使用这种方式?

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

Js代码  

1. $('.company-name li.enabled').click(function () {  
2.         var $self=$(this);  
3.         $('.company-name li.li-active').removeClass('li-active').removeClass('enabled_hover').addClass('enabled');  
4.         $self.removeClass('enabled').addClass('li-active').addClass('enabled_hover');  
5.   
6.     });  

 为什么不使用方式二呢?

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

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

 

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

解决方法:

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

没有hover时的样式:

Css代码  

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

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

hover时的样式:

Css代码  

1. /* hover时,高度减少两个像素 */  
2. .company-name li.enabled:hover,.company-name li.enabled_hover{  
3.     border:2px solid #ff4646;  
4.     height: 28px;  
5.     line-height: 28px;  
6.     padding:0px 0px;  
7. }  

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