css 列表 hover时闪动

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,达到目的