2016-08-13 6 views

答えて

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>

関連する問題