0

I'm toggling a class on an element when hovered, the class is added just fine but margin-top seems to just get ignored. How do I get the margin-top style to work correctly? My Code is Here @ jsfiddle. Code is just a snippet.

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>
4

8 回答 8

7

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

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

于 2013-05-28T13:23:50.330 回答
5

尝试改用这个：

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

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

于 2013-05-28T13:23:33.617 回答
3

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

于 2013-05-28T13:23:40.237 回答
2 
#nav ul a li.hover {
    background-color: red;
    margin-top: 100px;
}

请在此处阅读有关样式的优先级

于 2013-05-28T13:23:32.640 回答
2

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

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

Ps 避免使用!important

于 2013-05-28T13:25:16.217 回答
1

在这里工作，例如

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

#nav .hover

正如您之前使用 #nav li 定义样式一样。

于 2013-05-28T13:29:08.617 回答
0

您margin-top没有被应用，因为您的.hover类的特异性远低于列表项的原始样式（使用 ID 代替）。看看这个方便的（极客）图表。

一种解决方案是更改您的 CSS 以在两个地方都使用 ID（正如@Alex 建议的那样），甚至用类似的东西覆盖!important，但这些都不是一个可行的长期解决方案。*

最好的办法是将您的 CSS 重构为仅使用类。如果这就是您想要实现的全部，也无需使用 jQuery 进行悬停样式。最后，正如@Vega 指出的那样，您ul只能将li项目作为直接子项。这给你留下了这个：

.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伪类，那么这一点就变得没有意义了。

于 2013-05-28T13:24:47.323 回答
-1 
please use different class name instead of hover to "hover1".

may be class name  conflict with hover property
于 2013-05-28T13:30:27.980 回答