css 列表 hover时闪动
选中事件:
//企业列表增加单击事件 $('.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'); });
为什么要使用这种方式?
另外一种方式(方式二):
$('.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时的样式:
.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时的样式:
/* 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,达到目的