jQuery:添加了类，但忽略了页边空白顶部样式

我在元素上切换一个类，悬停时，该类添加得很好，但

边距顶部

似乎被忽略了。如何使

页边距顶部

样式正常工作。代码只是一个片段

CSS:

jQuery：

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

HTML:

---

请阅读有关样式优先级的信息

尝试使用以下选项：

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

---

问题是你的CSS选择器不够具体，所以

margintop:100px被
页边距顶部：0否决
您的另一个样式更具体，请将
.hover
更改为
#nav li.hover
这是css特殊性的问题，只需在.hover之前添加
#nav li
，请参阅

选择器
#nav li
更精确，因此
.hover
会被覆盖。
您的
边距顶部
未被应用，因为您的
.hover
类的样式远小于列表项的原始样式（使用ID）。一个方便的（极客）图表

一个解决方案是将CSS更改为在两个位置都使用ID（正如@Alex所建议的），甚至使用类似于
的东西！重要信息
，但这两项都不是可行的长期解决方案。*

最好的办法是重新考虑CSS，使其只使用类。如果您只想实现这些，那么也不需要使用jQuery进行悬停样式设置。最后，正如@Vega所指出的，您的
ul
只能将
li
项作为直接子项。这就给你留下了：

以及经修订的HTML：

<div class="nav" id="nav">
    <ul>    
        <li>
            <a href="#">
                <h3>title</h3>
                <p>description.</p>
            </a>
        </li>
        <li>
            <a href="#">
                <h3>title</h3>
                <p>description.</p>
            </a>
        </li>
        <li>
            <a href="#">
                <h3>title</h3>
                <p>description.</p>
            </a>
        </li>
    </ul>
</div>











*您可以主张在这里使用ID，但这使得您的
.hover
类只能在这个实例中使用。单独上课会让你的生活更轻松。当然，如果您修改为使用
：hover
伪类，那么这一点就没有意义了。
这是由于CSS的特殊性

您将样式设置为
#nav li
，这将比仅引用一个类更重要

注意：避免使用
！重要信息
此处正在工作，例如


而不仅仅是使用。悬停使用

#nav .hover 

正如您之前使用#nav li定义样式一样。
您的HTML结构不正确
ul>a>li
。在
ul
内不能有
a
标签
ul
只能包含
li
元素。感谢您对其不起作用的原因进行深入解释。这不会造成问题。
please use different class name instead of hover to "hover1".

may be class name  conflict with hover property 

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

<div class="nav" id="nav">
    <ul>    
        <li>
            <a href="#">
                <h3>title</h3>
                <p>description.</p>
            </a>
        </li>
        <li>
            <a href="#">
                <h3>title</h3>
                <p>description.</p>
            </a>
        </li>
        <li>
            <a href="#">
                <h3>title</h3>
                <p>description.</p>
            </a>
        </li>
    </ul>
</div>

#nav .hover 

please use different class name instead of hover to "hover1".

may be class name  conflict with hover property