javascript - 在悬停时添加 CSS 边框并在 jQuery 中删除它

Question

我正在尝试使用 jQuery 将一个类添加到悬停时的一组 float 列表项。

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

至少这是我的意图。它不工作。这是一个 fiddle :

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/