ホバー効果が

Question

は、以下のコードを考えてみましょう：

<div class="row"> 
    <div class="col-sm-12"> 
    <div class="form-group form-group-default"> 
     <label>OPTIONS</label> 
     <div class="checkbox"> 
     <input type="checkbox" id="checkbox2"> 
     <label for="checkbox2">Email</label> 
     </div> 
    </div> 
    </div> 
</div> 

私は<div class="checkbox">上にカーソルを移動するたびに、<div class="form-group form-group-default">のフォーカスイベントがトリガされます。 CSSコードのように、私は<div class="checkbox">の関連ホバーコードを見つけませんでした。

Answer 1

私の知る限り、DOMのすべてのイベントは、その親を通して伝播します。一部のイベントハンドラがそれを停止しない限り。

この例を見てください。

<!-- https://jsfiddle.net/z0ncxhfq/ --> 
<div class="parent"> 
    <a class="dontpropagate child" href="#one">Link one</a> 
</div> 
<div id="dont" class="parent"> 
    <a class="child" href="#two">Link two</a> 
</div> 
<script> 
var elements = document.querySelectorAll(".dontpropagate"); 
for(var i = 0, len = elements.length; i < len; ++i) { 
    elements[i].addEventListener("click", stopPropagation, false); 
} 
function stopPropagation(event) { 
    event.stopPropagation(); 
} 
</script> 

Answer 2

私は右のそれを理解している場合は、単にフォームグループスタイリングを削除する必要があります。

試してみてください。

.form-group:focus, 
.form-group:hover, 
.form-group:active { 
    outline: none !important; 
}