Clicking a Child Doesn't Trigger the Parent's :Active State in Ie

How can I show the active state of a child by clicking it's parent?

You can use the descendent selector > (or any other selector which will target the child of an :active parent) to style the child when the parent is active.

div:active {

  background-color: pink;

}

div:active > a, a:active {

  background-color: yellow;

}

<div>

  <a href="https://www.w3schools.com">w3schools.com</a>

</div>

a with an inner span not triggering :active state in IE 8

Right, terribly over-complicated solution (and still imperfect), but: if you don’t wrap the link text in the <span>, and instead just use the <span> as a place to put your background image and position it absolutely within the <a>, then the <span> (mostly) stops blocking the :active state.

Test page: http://www.pauldwaite.co.uk/test-pages/2769392/3/

HTML

<a class="button" href="#">
<span></span>Link
</a>

CSS

<style type="text/css">
a.button {
    position: relative;
    padding: 10px;
    color: #c00;
}

a.button:active {
    color: #009;
    font-weight: bold;
}

a.button span {
    position: absolute;
    top: 50%;
    left: 3px;
    margin-top: -2px;
    border: solid 2px #000;
}
</style>

Of course, the area that the <span> covers still traps the click event, so when the user clicks on there, they won’t see the :active state. It is a slight improvement on the previous situation.

CSS :active pseudo class - target child elements in IE

Figured out a bit more,

IE was not doing the :active class for child elements because it was behaving as if the child elements were on top of the link, it would work, however if the link was clicked on its very edges.

In the future, I'll try to have simpler buttons as :active will work for the link itself, just not for child-elements within the link that IE treats as almost separate rather than part of the link itself, At least it does for the :active class.

CSS: Prevent parent element getting :active pseudoclass when child element is clicked

From the spec:

Selectors doesn't define if the parent of an element that is ‘:active’ or ‘:hover’ is also in that state.

That means it's implementation dependent. If an implementation chose to act this way (as current browsers obviously do), there's nothing in the standard that can change that.

With CSS4, you might be able to do:

.parent:active:not(:has(:active)) {
   color: red;
}

but that is neither available nor finalized yet.

How do I prevent a parent's onclick event from firing when a child anchor is clicked?

Events bubble to the highest point in the DOM at which a click event has been attached. So in your example, even if you didn't have any other explicitly clickable elements in the div, every child element of the div would bubble their click event up the DOM to until the DIV's click event handler catches it.

There are two solutions to this is to check to see who actually originated the event. jQuery passes an eventargs object along with the event:

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

You can also attach a click event handler to your links which tell them to stop event bubbling after their own handler executes:

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

CSS selector :active not working on child element click in IE8

You could use a background image instead of a real image.

html:

<div id="ctr__Wrapper" class="wrapper">
    <div id="ctr" class="control clickable">
    </div>
</div>

css:

.control
{
    border: 1px solid #000;
    background-color: #666;
    height: 40+height-of-logopx;
    background-image:url(logo.png); background-repeat:no-repeat;
    background-position:20px 20px;
}

.control:active
{
    background-color: #bbb;
}

:active for parent div class not working for child div

Why not use an actual button with its active state?

EDIT:
I noticed you mentioned this doesn't work in IE, this is because in IE, the clickable area is behind the content you put on the parent div, for whatever reason, honestly I don't understand that very well; but fixes I have found include setting a ::before and ::after pseudo-class to the parent div, with the following properties:

.parent:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

button {

  width: 100px;

  height: 100px;

}

button:active {

  background-color: red;

}

.parent {

  width: 100px;

  height: 100px;

  border: 1px solid #000;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

}

.parent:active {

  background-color: red;

  border: 1px solid #000;

}

.parent:before {

  content: "";

  display: block;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}

<button>

  <img src="#"/>

  <span>Text</span>

</button>

<div class="parent">

  <div class="child1" style="width:50px;height:50px;border:1px solid blue;">

    <img src="#" />

  </div>

  <div class="child2" style="width:20px;height:20px;border:1px solid green;">

    <span>hii</span>

  </div>

</div>

make :active work at the children node in IE

Case 1: The .productCss is clicked on the edge

• it works in IE and other browser. The :active state is true

Case 2: The figure is clicked

For emphasis we set figure { border: 1px solid red; }

• it works in other browsers. The :active state is true
• it doesn't work in IE.

Why is this? I guess IE acts as follows: We don't click the .productCss, but the figure. Therefor only the figure has the :active state, not the parent div.

---

Related Topics