Can the parent's :active pseudo class be overridden?

Question

Can the parent's :active pseudo class be overridden?

I'm struggling with changing the color of a div when clicked while preventing its parent's pseudo-class from triggering. Here is the markup I have:

<div class="parent">
  I should change my color to green when clicked
  <div class="element">I should do nothing when clicked</div>
</div>

Below is the corresponding CSS:

.parent {
  width:200px;
  height:200px;
  background: red;
  color: #fff;
}
.parent:active {
  background:green;
}
.element {
  background:blue;
}

I have tried using e.stopPropogation() when .element is clicked, but it didn't work. Any suggestions on how to achieve this? Check out the demo.

jquery html css

Answer 1

Answer №1

If you want to avoid using :active, consider utilizing jQuery as demonstrated in this live example (link).

$('.element').mousedown(function(e){
  e.stopPropagation();
});

$('.parent').mousedown(function(e){
  $('.parent').css('background', 'green')
    }).mouseup(function(e){
  $('.parent').css('background', 'red')
});

Answer 2

If you want to avoid using :active, consider utilizing jQuery as demonstrated in this live example (link).

$('.element').mousedown(function(e){
  e.stopPropagation();
});

$('.parent').mousedown(function(e){
  $('.parent').css('background', 'green')
    }).mouseup(function(e){
  $('.parent').css('background', 'red')
});

Answer 3

Answer №2

Here's an idea for the parent element - add a new class called allow-active

<div class="parent allow-active">

Update your CSS so that .parent:active becomes

.parent.allow-active:active {
    background:green;
}

This means the background color will only change if the div has both the parent and allow-active classes

Next, use some jQuery to toggle the allow-active class

$('.element').mousedown(function(e){
    $('.parent').removeClass('allow-active');
}).mouseup(function(e){
    $('.parent').addClass('allow-active');
});

Answer 4

Here's an idea for the parent element - add a new class called allow-active

<div class="parent allow-active">

Update your CSS so that .parent:active becomes

.parent.allow-active:active {
    background:green;
}

This means the background color will only change if the div has both the parent and allow-active classes

Next, use some jQuery to toggle the allow-active class

$('.element').mousedown(function(e){
    $('.parent').removeClass('allow-active');
}).mouseup(function(e){
    $('.parent').addClass('allow-active');
});

Answer 5

Answer №3

achievable using javascript

$(document).ready(function(){
    $(".main").click(function(){
$(this).css("background","green")
    });
   $(".main .item").click(function(e) {
       return false;
   });
});

as well as the stylesheet

.main {
  width:200px;
  height:200px;
  background: red;
  color: #fff;

}
.main:active {

}
.item {
  background:blue;

}

HTML remains the same

Answer 6

achievable using javascript

$(document).ready(function(){
    $(".main").click(function(){
$(this).css("background","green")
    });
   $(".main .item").click(function(e) {
       return false;
   });
});

as well as the stylesheet

.main {
  width:200px;
  height:200px;
  background: red;
  color: #fff;

}
.main:active {

}
.item {
  background:blue;

}

HTML remains the same

Answer 7

Answer №4

Another way to tackle the Doorknob's issue is by making use of the event.target:

$('.container').click(function(e){
    if ($(e.target).is(this))
        $('.container').css('background-color', 'blue');
}).dblclick(function(e){
    if ($(e.target).is(this))
        $('.container').css('background-color', 'yellow');
});

Check out the Demo.

Answer 8

Another way to tackle the Doorknob's issue is by making use of the event.target:

$('.container').click(function(e){
    if ($(e.target).is(this))
        $('.container').css('background-color', 'blue');
}).dblclick(function(e){
    if ($(e.target).is(this))
        $('.container').css('background-color', 'yellow');
});

Check out the Demo.

Can the parent's :active pseudo class be overridden?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Disable multiple buttons at once by clicking on them

Achieving the retrieval of all data can be done simply by utilizing the `echo json_encode($data);

Refresh the webpage excluding a single element using AJAX

"Fixing the position of a div on the Samsung Galaxy S8 navigation bar to

The consistent issue of receiving a 302 Object Moved error is a common occurrence with

Activate a switch in a single table after its information has been transferred to a different table

What causes the odd gaps at the bottom of boxes in a Pure CSS Masonry layout?

Instructions on removing rows by using buttons within a JavaScript-generated table

What is the reason behind receiving email alerts whenever visitors access my website?

Troubleshooting Uploadify Issues

Is there an error when iterating through each table row and extracting the values in the rows?

Avoiding duplicate touch events with an if statement

Synchronous JavaScript function with live update

Issues with the collapse feature in Bootstrap 5.1.3 accordion

The Highcharts Range Selector feature may encounter issues when used with multiple series

Setting up aliases for "HTML import" paths - a step-by-step guide

JavaScript in Internet Explorer is showing an error message stating that it is unable to access the property '0' of an undefined or null

Tips on utilizing jQuery or JavaScript to efficiently filter out outcomes exceeding a specified range

Can a class be created using a PHP variable as its basis?

Attempting to locate the element's position using Selenium in Python