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被忽略/覆盖。

Answer 2

请尝试使用此代码：

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

问题是您的CSS选择器不够具体，因此margin-top: 100px;推翻了margin-top: 0;。

Answer 3

您的其他风格更具体，将.hover更改为#nav li.hover

Answer 4

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

请阅读样式here

中的优先级

Answer 5

这是由于CSS特异性。 http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

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

P.S。避免使用!important

Answer 6

在这里工作，例如

http://jsfiddle.net/HJTqN/10/ 而不只是使用.hover使用

#nav .hover

因为您之前使用#nav li来定义样式。

Answer 7

您的margin-top未被应用，因为您的.hover课程远远少于列表项目的原始样式specificity（使用ID代替）。 Check this out表示方便（令人讨厌）的图表。

一种解决方案是将CSS更改为在两个地方都使用ID（如@Alex建议的那样），或甚至覆盖!important之类的内容，但这些都不是可行的长期解决方案。 *

最好的办法是将CSS重新分配到仅使用类。如果这是你想要实现的全部，那么也没有必要使用jQuery来悬停样式。最后，正如@Vega指出的那样，您的ul只能拥有li项作为直接子项。这让你with this：

.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;
}

和修改后的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伪类，那么这一点就没那么了。

Answer 8

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

may be class name  conflict with hover property

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

8 个答案: