javascript - 如果单击子元素，则不要更改父元素的颜色

Question

这是我的 HTML:

.imageURL:active .image_submit_div {
  background-color: #ccc;
  /* has no effect */
}

.image_submit_div:active {
  background-color: #e6e6e6;
}

<div class="image_div">
  <label for="id_image" class="image_submit_div">
        <h3>+ add file</h3>
        <input id="id_imageURL" class="imageURL" type="text" name="imageURL" />
    </label>
  <input id="id_image" type="file" name="image" />
</div>

父 div 是 image_submit_div。当你点击它时，它会改变颜色:

子元素是.imageURL。单击此按钮时，我不希望父 div 更改颜色。当我执行以下代码时，它没有任何效果:

那么如何防止点击子div时父div改变颜色呢？

编辑:这是一个代码片段，可以让您更好地了解:https://codepen.io/kingdezz/pen/WOoPgY

Answer 1

在 CSS 中，您不能根据其子项(或该子项上的事件)来设置父项的样式。你不能做像 child:hover parent { styles } 这样的事情。

CSS 仅适用于从上到下 parent:hover child { styles }。

你的问题有点不清楚，但你可以使用 JQ

您可以使用mousedown 和mouseup 事件来实现您想要的

$(".imageURL")
  .mousedown(function(e) {

    $(this).parent(".image_submit_div").addClass("colored")

  })
  .mouseup(function() {
     $(this).parent(".image_submit_div").removeClass("colored")
  });

.image_submit_div:active {
 background-color:red;
}
.image_submit_div.colored { 
background-color:blue;
}
.image_submit_div { 
display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_div">
  <label for="id_image" class="image_submit_div">
    <h3>+ add file</h3>
    <input id="id_imageURL" class="imageURL" type="text" name="imageURL" value="i don't trigger click on parent" />
  </label>
  <input id="id_image" type="file" name="image" />
</div>