Grow your CSS skills. Land your dream job.

:active issue with IE

  • # November 23, 2012 at 5:45 pm

    Hello!
    There is a situation when I have a list of buttons with a background image. The problem is that :active doesn’t work in IE. Please see a simple example below:

    <ul>

    <li><span>1</span></li>

    <li><span>2</span></li>

    </ul>

    li { background: blue; }

    li:hover {background: red; }

    li:active {background: orange; }

    span { background: url(../../img/tb_delete.png); display: block; }

    As you notice, span has a background image and li has a background color that supposed to change on hover and active. Everything works fine in FF, Chrome and Safari, except IE. The problem, as far as I understand, is the span tag. IE doesn’t do :active on element that has another element on top (inside) of it. Is there something I can do to go around this?

    # November 24, 2012 at 2:19 am

    Have you tried adding an active class to the span as well as the li?

    span:active {
    background: orange;
    }

    # November 24, 2012 at 3:47 pm

    Unfortunately, I can’t do anything with the span, because it has it’s own background image that changes on :active.

    # November 24, 2012 at 6:34 pm

    Then I guess you’ll have to resort to an .active class and use js to apply it.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".