CODEWITHSUNDEEP
javascriptjquerycss
Zorgan
Zorgan

Reputation: 9173

Don't change color of parent element if child element is clicked

Here's my 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>

The parent div is image_submit_div. When you click on it, it changes color:

The child element is .imageURL. When this is clicked, I don't want the parent div to change color. When I do the following code, it has no effect:

So how do I prevent the parent div from changing color when I click the child div?

EDIT: Here is a code snippet to give you a better perspective: https://codepen.io/kingdezz/pen/WOoPgY

Upvotes: 0

Views: 764

Answers (2)

Mihai T
Mihai T

Reputation: 17697

In CSS you can't style a parent depending on it's child ( or an event on that child ) . You can't do things like child:hover parent { styles } .

Css only works from top to bottom parent:hover child { styles }.

Your question is a bit unclear but you could use JQ for this

you can use mousedown and mouseup events to achieve what you want

$(".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>

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

Use Jquery .focus() and .blur() events like,

$(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>

Upvotes: 0

Related Questions