jQuery:添加了类，但忽略了 margin-top 样式

Question

我在鼠标悬停时在元素上切换一个类，该类添加得很好，但 margin-top 似乎只是被忽略了。如何让 margin-top 样式正常工作？ My Code is Here @ jsfiddle .代码只是一个片段。

CSS:

#nav ul {
    display: inline;
    list-style: none;
}
#nav li {
    float:left;
    width:100px;
    height:100px;
    margin-top:0px;
    margin-right:50px;
}
.hover {
    background-color: red;
    margin-top: 100px;
}

jQuery:

$('#nav ul a li').hover(function () {
    $(this).toggleClass('hover');
});

HTML:

<div id="nav">
    <ul>    <a href="">
                <li>

                    <h3>title</h3>
                    <p>description.</p>
                </li>
            </a>
    <a href="">
                <li>
                    <h3>title</h3>
                    <p>description.</p>
                </li>
            </a>
    <a href="">
                <li>
                    <h3>title</h3>
                    <p>description.</p>
                </li>
            </a>

    </ul>
</div>

Answer 1

这是一个css 特异性问题，只需在.hover前添加#nav li，参见fiddle

选择器 #nav li 更精确，因此 .hover 被覆盖。