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

Question

我在悬停时切换一个元素上的类,该类添加得很好,但margin-top似乎只是被忽略了.如何使margin-top样式正常工作？我的代码在这里@ 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 特异性问题,只需#nav li在.hover之前添加,请参阅小提琴

选择器#nav li更精确,因此.hover被忽略/覆盖.

Answer 2

请尝试使用此代码:

#nav li.hover{
    background-color: red;
    margin-top: 100px;
}

问题是你的CSS选择器不够具体,所以margin-top: 100px;被推翻了margin-top: 0;.