0

ホバーしたときに要素のクラスを切り替えています。クラスは問題なく追加さ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>
4

8 に答える 8

7

これは cssの特異性の問題#nav liです。.hover の前に追加するだけです。フィドルを参照してください

セレクター#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 に答える
0

あなたのクラスは、リスト項目の元のスタイル (代わりに ID を使用) よりもはるかに特異性margin-topが低いため、適用されていません。便利な (こっけいな) チャートについては、 こちらをご覧ください。.hover

1つの解決策は、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クラスはこの 1 つのインスタンスでしか使用できなくなります。クラスだけを使用すると、生活が楽になります。もちろん、:hover代わりに疑似クラスを使用するように修正すると、ポイントは意味がなくなります。

于 2013-05-28T13:24:47.323 に答える