Question

我正在尝试使用jQuery在悬停时向一组浮动列表项添加一个类。

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

这至少是我的意图。它不起作用。这是一个小提琴：

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

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

Answer 1

您的保证金问题是由于您最初将保证金定义为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/

Answer 2

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

确定填充对左侧和右侧都增加了4px，您希望从边距中减去8个像素，并使用margin-right: 11px作为.over类。这使列表项保持原始位置。

请在此处查看代码更改：http://jsfiddle.net/NgXSc/21/

Answer 3

在非悬停元素上设置透明边框（或将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 ......

Answer 4

不要担心负利润。将您的.over课程更改为

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

这是在不向非悬停状态li a元素应用透明边框的情况下获得所需效果的最快方法。

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

4 个答案: