3

html

<ul class="navBarExtended">
   <li><a href="#">Link</a></li>
</ul>

css

.onHover{
text-decoration: underline;
 }

javascript

$("ul.navBarExtended li a").hover(
    function(){
        $(this).addClass("onHover");
    },
    function(){
        $(this).removeClass("onHover");
 });

要素に「onHover」クラス、具体的にはリンクを追加しようとしていますが、機能していないようです。問題が発生する可能性があるのはどこですか。

4

2 に答える 2

7

より良い解決策は、次のように:hover疑似クラスを使用することです。

ul.navBarExtended li a:hover {
   text-decoration: underline;
}

ただし、元のコードは機能しているようです (a要素のデフォルト CSS を下線なしに設定したと仮定します): http://jsfiddle.net/jaypeagi/wSG4s/

aまた、コード内で要素を含む HTML の前に script タグを配置すると、機能しないことにも注意してください(こちら を参照)。これは、スクリプトの実行時に要素が存在しないためです。コードをJQuery ドキュメントの準備完了イベントで実行することを検討してください。例はこちら。

于 2013-03-18T12:47:40.593 に答える
3

aこれは、デフォルトでタグにすでにそれが含まれているためだと思いますtext-decoration。CSS を追加して、デフォルトで none に設定するだけです。

ul.navBarExtended li a {
    text-decoration: none;
}

ただし、CSS クラスを使用してホバーを管理する必要があります (可能であれば)。以下を追加します。

ul.navBarExtended li a:hover {
    text-decoration: underline;
}
于 2013-03-18T12:47:40.550 に答える