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>

Answer 2

使用Jquery .focus()和.blur()等事件，

$(function() {
  $('#id_imageURL').on('focus', function() {
    $(this).closest('label').css('background', '#ccc');
  }).on('blur', function() {
    $(this).closest('label').removeAttr('style');
  })
});

.image_submit_div {
  position: relative;
  border: 1px solid #ccc;
  display: inline-block;
  padding: 20px 50px;
  width: 55%;
  height: 320px;
  cursor: pointer;
  background: #e6e6e6;
  margin: 0 0 25px;
}

.image_submit_div:active {
  background-color: #ededed;
}

.imageURL:active .image_submit_div {
  background-color: #ededed;
}

<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" />
    </label>
  <input id="id_image" type="file" name="image" />
</div>

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

2 个答案: