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;
}

在父div上创建焦点事件的子div上的悬停效果

2 个答案: