Home/ Questions/Q 1063435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T18:47:01+00:00

I’m making a fancy button that has hover and click effects. The button looks

  • 0

I’m making a fancy button that has hover and click effects.
The button looks something like:

<a class="redB">
 <span class="a">&nbsp;</span>
 <span class="b">Email Us</span>
 <span class="c">&nbsp;</span>
</a>

My problem is in trying to access the three span elements in my css like this:

.redB:active span.a{background-position:0 -432px}
.redB:active span.b{background-position:0 -504px}
.redB:active span.c{background-position:0 -576px}

This works fine in FF and Chrome, but not in Internet Explorer 🙁

I’m also using this css for the hover

.redB:hover span.a{background-position:0 -216px}
.redB:hover span.b{background-position:0 -288px}
.redB:hover span.c{background-position:0 -360px}

And that works great in FF, Chrome and IE

Is there a way to get the :active class working like for child elements in IE?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0