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