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

Is there a way to choose only the rows that are both even and not currently hidden?

What's causing me to encounter two canvases while implementing PIXI.js in my Next.js project?

How can I write a JavaScript function that eliminates all white spaces within a string?

Tips for resolving the 'node is not defined' error in the case of passing a default value

Cross domain Ajax POST requests using CodeIgniter and AjaxBy utilizing CodeIgn

the button function is unresponsive

Efforts to seamlessly combine two divisions of a business card through the use of CSS and HTML

What is the best way to remove table cells from a TableBody?

Displaying a division when a button is pressed

What is the best way to ensure my responsive form is centered and aligned properly with all other elements on the page

The page you are trying to access could not be found after attempting to upload 5

What is preventing the 'p:nth-child(1)' from functioning properly in my HTML code?

What is the best way to use checkboxes in VueJS to apply filters on a loop and display specific results?

Display text on the screen with a customized design using JavaScript's CSS styles

Error: Class cannot be loaded by React Webpack loader

Ways to modify the gap between buttons using CSS

Receiving an empty string from Chrome FileReader when dealing with large files (300MB or more)

Ways to simulate a class instance that is being received from a file with a different class instance

Currently, my goal is to create PDFs using Angular

Exploring the World of Unit Testing with Jasmine and Sinon Factories