在jQuery上添加CSS边框并在jQuery中删除它

我试图用jQuery将一个类添加到一组悬浮的列表项中。在jQuery上添加CSS边框并在jQuery中删除它

我添加了该类，然后使用margin:-4px从新插入的边框中删除了添加的空间，以便列表项不会左右移动。

这是我的意图，至少。它不工作。这里是一个小提琴：

http://jsfiddle.net/NgXSc/1/

注意的兄弟列表项上悬停如何转变。预期的结果是最后一个列表项目，在悬停时没有任何动作。

来源

2011-12-01 Yahreen

您的保证金问题正在引发，因为尽管您最初将保证金定义为margin-right: 19px，但您会用margin: -4px !important覆盖该保证金。

此外，没有必要为此使用jQuery - 只需使用:hover CSS伪类。

我修改你的代码产生您想要的结果：

HTML：

<nav id="cs-client-list"> 
    <ul> 
     <li><a href="#">A</a></li> 
     <li><a href="#">B</a></li> 
     <li><a href="#">C</a></li> 
     <li><a href="#">D</a></li> 
    </ul> 
</nav><!--end cs-client-list-->

CSS：

#cs-client-list { padding: 25px; } 
#cs-client-list li { 
    background: yellow; 
    float:left; 
    margin: 0 19px 0 0;} 
#cs-client-list li a { 
    text-indent: -99999px; 
    width: 111px; 
    height: 80px; 
    border: 4px solid transparent; /* use page's background color (ie #fff) if you want the border to display outside the box */ 
    display: block; } 
#cs-client-list li a:hover { border-color: #000; }

前瞻：http://jsfiddle.net/Wexcode/NgXSc/26/

来源

2011-12-01 22:33:55 Wex

谢谢。它适用于IE – Yahreen

'：hover'适用于IE7及更高版本。 – Wex

再次感谢。是的，它适用于所有人的朋友IE6 – Yahreen

设置一个透明边框（或设置border-color至background-color的元素）放在非悬停元素上，等于悬停元素上可见边界的宽度。并删除!important;这是没有必要的，只要使用特异性：

#cs-client-list li a{float:left;display:block;text-indent:-99999px;height:80px;background-color:yellow;width:111px; border: 4px solid transparent;} 

#cs-client-list li a.over{border:4px solid #000;cursor:pointer;}

Updated JS Fiddle

这并不需要jQuery的，甚至在IE6 ...

来源

2011-12-01 22:39:12

margin: -4px不是19px相对变化。它完全取代它。

找出填充将左右两边都加上4px，您希望从边距中减去8个像素，并使用margin-right: 11px代替.over类。这将列表项保留在其原始位置。

在这里看到代码的变化：http://jsfiddle.net/NgXSc/21/

来源

2011-12-01 22:39:21

不要招惹切缘阴性。您.over类更改

#cs-client-list li a.over{ border: 4px solid #000; width: 103px; }

这是得到你想要的效果不应用一个透明的边框给非悬停状态li a元素的最快方式。

来源

2011-12-01 22:43:07

在jQuery上添加CSS边框并在jQuery中删除它

回答

相关问题