在悬停时添加 CSS 边框并在 jQuery 中将其删除答案

【问题标题】：Adding a CSS Border on Hover and Removing It in jQuery在悬停时添加 CSS 边框并在 jQuery 中将其删除
【发布时间】：2011-12-24 11:47:34
【问题描述】：

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

我添加类，然后使用margin:-4px 从新插入的边框中删除添加的空间，这样列表项就不会移动。

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

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

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

【问题讨论】：

标签： javascript jquery html css internet-explorer

【解决方案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/

【讨论】：

再次感谢。是的，这是给大家的朋友IE6
好吧，让你的 jQuery 使用 hover() 函数，用你的 .over 类代替我的 :hover 伪类。欢迎您！

【解决方案2】：

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

确定 padding 向左右都增加了 4px，您希望从边距减去 8 个像素，并为 .over 类使用 margin-right: 11px。这会将列表项保持在其原始位置。

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

【讨论】：

【解决方案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 中也不需要...

【讨论】：

【解决方案4】：

不要乱用负边距。将您的 .over 课程更改为

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

这是获得所需效果的最快方法，无需对非悬停状态li a 元素应用透明边框。

【讨论】：