Prevent parent element from changing color when child element is clicked

Question

Prevent parent element from changing color when child element is clicked

Check out my HTML:

.imageURL:active .image_submit_div {
  background-color: #ccc;
}

.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 main div is image_submit_div. It changes color when clicked.

The nested element is .imageURL. I don't want the parent div's color to change when this is clicked. The code above doesn't work for that purpose.

How can I stop the parent div from changing color when the child div is clicked?

UPDATE: For more clarity, here is a link to a code snippet: https://codepen.io/kingdezz/pen/WOoPgY

javascript jquery css

Answer 1

Answer №1

If you try to style a parent element based on its child (or an event that occurs on the child) in CSS, it won't work. You cannot write something like child:hover parent { styles }.

CSS only works from top to bottom, so you need to use parent:hover child { styles }.

Although your question is a bit unclear, you could consider using jQuery for this purpose.

You can make use of the mousedown and mouseup events to achieve the desired effect:


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

+ add file

Answer 2

If you try to style a parent element based on its child (or an event that occurs on the child) in CSS, it won't work. You cannot write something like child:hover parent { styles }.

CSS only works from top to bottom, so you need to use parent:hover child { styles }.

Although your question is a bit unclear, you could consider using jQuery for this purpose.

You can make use of the mousedown and mouseup events to achieve the desired effect:


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

+ add file

Answer 3

Answer №2

Implementing the Jquery methods .focus() and .blur() can be achieved in the following way:

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

Answer 4

Implementing the Jquery methods .focus() and .blur() can be achieved in the following way:

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

Prevent parent element from changing color when child element is clicked

Answer №1

+ add file

Answer №2

Similar questions

Move the cursor to the start of a textarea with the power of jQuery

Trouble with selecting inputs within a Div Element

Showing C# File Content in JavaScript - A Step-by-Step Guide

The Unexpected Flash: Troubleshooting an AJAX Request Gone Awry in CompoundJS

The checkbox will be automatically checked whenever there is any modification in the textbox

Experiencing difficulties with capturing the focus event of the <select> tag

Adjust the margin of FormHelperText within a FormControl specifically for a Select component in Material-UI

Is there a way to encase numerous <tbody> elements together?

There appears to be a malfunction with certain hyperlinks on the table

Issue with burger menu functionality, button unresponsive

Differences in font sizes across various browsers on Mac devices

Dynamically size and position elements to fit perfectly within the container

Inside nested ng-transclude, the AngularJS directive isolates the scope

Customize YouTube iframe styles in Angular 4+ with TypeScript

Clicking the button will cause the React component to close itself automatically

Is the JSON returned by the API server not being properly processed by the RequireJS module, resulting

Despite the presence of data within the array, the React array returns empty when examined using the inspect element tool

Should you construct a fresh element using JavaScript, or opt to reveal a concealed one using CSS?

The Bootstrap 5 navigation bar does not extend to the full width of its parent

Prevent unwanted bouncing and zooming on IOS10+ when using routing in VueJS