にホバー効果を適用します。現在は、親要素にもその効果を適用します。これを避けてどうすればいいですか?は私だけのような複数のdivを持っている最も深いセレクタ
0
A
答えて
0
私はそれはJavascript
はこの参照使用可能になると思う:https://jsfiddle.net/eszujrwm/
$(".hover-effect").each(function(){
if($(this).find(".hover-effect").length == 0){
$(this).mouseenter(function() {
$(this).addClass("hovered");
}).mouseleave(function() {
$(this).removeClass("hovered");
});
}
})
このコードは、すべての.hover効果素子を選択し、それが持つ子供を持っている場合、それらの一つ一つを参照しクラス「ホバー効果」何それは私たちがCSSでのMouseEnter/Leaveイベント
を追加するので、私たちはクラスを定義一番深い要素だがonhoverのスタイルが含まれている「推移していない」場合:
.hovered{
background-color:green;
}
0
この答えに続き一番深い要素here
についての話題がありました、ジェラルドFullmanは、私が思うに、あなたを助けることができる.deepestと呼ばれるjQueryプラグインを書きました。
私は今それをテストすることはできませんが、私はそれが同じようになると思う。なぜなら、潜在的な問題のため、使用のstopPropagationを避けるようにしてください
$(dokument).ready(function() {
$('.hover-effect').mouseover(function() {
$(this).deepest('.hover-effect'); // ...
});
});
。読んであなたは子ノードとして特定のセレクタを持っていない要素を選択する:not()
、:has()
を使用することができますhere
0
より
$(".hover-effect:not(:has(.hover-effect))")
.hover(function() {
$(this).toggleClass("deepest")
});
.deepest {
background:purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover-effect">
not deepest
<div class="hover-effect">
not deepest
<div class="hover-effect">
not deepest
<div class="hover-effect">deepest</div>
</div>
</div>
</div>
<div class="hover-effect">
not deepest
<div class="hover-effect">deepest</div>
</div>
<div class="hover-effect">deepest</div>
<div class="hover-effect">deepest</div>
関連する問題
- 1. 私は次のようなマークアップを持っているのdiv
- 2. JPAだけ私はこのような親を持っていない子供、
- 3. のWebPACKだけ私はこのような何かを持っている
- 4. は、私のようなものを持っている応答
- 5. ... ...私はXMLのようなものを持っている
- 6. SendInput、私はそのようなものを持っている
- 7. jQueryの私はこのようなdiv要素を持っているのdiv
- 8. 私はこのようなテーブルを持っているだけ上向き
- 9. は、私はこのようなdiv要素を持っているdivタグ
- 10. 私はこのようなフォームを持っている特定のセレクタ
- 11. は、どのように私は私はこのようなCSSセレクタのカップルを持っているCSSスタイルに
- 12. dbmigrator私のようなものを持っている移行
- 13. CSSセレクタ:私は、このようなCSSを持って
- 14. 私はこのようなテーブル持ってMariaDB/MySQLで最も古いエントリ
- 15. Pythonはだから私は、次のような辞書を持っている複数のキー
- 16. ポートは、私は誰もを助けるように思わないという疑問を持っている
- 17. PHP - 私はこのようなコード持っている複数の結果
- 18. のJava:だから私はこのようなもの持っているのtryブロックから変数
- 19. 私はこのようなリストを持っている数
- 20. jQueryのは、私はこのような要素持っているのdiv
- 21. 私が持っているものの単語(複数可)
- 22. は、私のようなdiv要素を持っているjqueryの
- 23. コンテナ形式は、私はこのようなHTMLでページを持っているより深い
- 24. はなぜ私のようなものを持っている一時テーブル
- 25. はだけなので、現在、私はこのようなものを持って管理
- 26. は、私はこのようなものPOJOクラスを持っているMyBatisの
- 27. 私はこのようなdiv要素を持っている場合
- 28. は、だから私はそうのような通常のボックスとイメージも持っている画像のHTML
- 29. ボタンは、私のようなブロックを持って、親のdivフォントサイズ
- 30. だから私はのcontentEditableのdivから来ている文字列を持っている、それはこのようなものですjqueryの
https://api.jquery.com/をお試しくださいイベント。ストッププロパゲーション/ – Abhi