I should change my color to green w...">
Geek asks and answers

Is it possible to suppress parent: active pseudo-class?

I have the following markup:

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

Here is the related CSS:

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

Is there a way to prevent the class alias from starting .parent :activewhen clicked .element? Tried e.stopPropogation()when pressed .elementwithout luck. demo

+5
source share
4 answers

You can simply use jQuery instead :active, as in this demo (link) .

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

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

How about a parent introduce an extra class like allow-active

<div class="parent allow-active">

Then change your css to .parent:activebecome

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

The color value is changed only if div has both parentand allow-activeclasses

Then a little jQuery to switch the class allow-active

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

js

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

css

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

}
.parent:active {

}
.element {
  background:blue;

}

HTML

0

Doorknob event.target:

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

Demo .

0
source

More articles:


All Articles