CODEWITHSUNDEEP
cssinternet-explorerhover
atlas24
atlas24

Reputation: 11

CSS Hover not working in IE i tags wrapped in a tags

I have these links with classes inside like so

<a href="#"><i class="icon-instagram"></i></a>

Now I've styled them as such

.top-social-icons a i.icon-instagram{
    background:#DB97BE;
    padding:7px;
    transition-duration:800ms;
    transition-property: width, background;transition-timing-function:ease;
}

.top-social-icons a i.icon-instagram:hover{
    background:transparent;
    transition-duration:800ms;
    transition-property: width, background;
    transition-timing-function:ease;
}

literally works in every browser except IE I've been racking my brain over this. Sorry if I Posted to sloppy this only my second time ever posting here. I'm assuming it has something to do with the i tags wrapped in the a tags?

link to site

Upvotes: 0

Views: 101

Answers (4)

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

HTML

 <div class="top-social-icons">
    <a href="#"><i class="icon-instagram">Insta</i></a>
    </div>

CSS

.top-social-icons a i.icon-instagram{
    background:#DB97BE;
    padding:7px;
    transition-duration:800ms;
    transition-property: width, background;transition-timing-function:ease;
}

.top-social-icons a i.icon-instagram:hover{
    background:transparent;
    transition-duration:800ms;
    transition-property: width, background;
    transition-timing-function:ease;
}

Fiddle Demo

Compatibility browser support for transition effects

Upvotes: 0

ducdhm
ducdhm

Reputation: 1952

Please try remove transition- property. You should declare them one times

.top-social-icons a i.icon-instagram:hover{
    background:transparent;
    /*transition-duration:800ms;
    transition-property: width, background;
    transition-timing-function:ease;*/
}

Upvotes: 0

SUDO Los Angeles
SUDO Los Angeles

Reputation: 1635

Like Eru said, for non-anchor tags also add a doctype, but in this revised CSS it is not necessary:

<!doctype html>

For modern cross-browser transition (may only work in IE10+ with transitions) support:

.top-social-icons a { -webkit-transition: 0.8s ease background, 0.8s ease width;
-moz-transition: 0.8s ease background, 0.8s ease width;
-ms-transition: 0.8s ease background, 0.8s ease width;
-o-transition: 0.8s ease background, 0.8s ease width;
transition: 0.8s ease background, 0.8s ease width; }
.top-social-icons a i.icon-youtube{background:#CB2027;padding:7px}
.top-social-icons a:hover i.icon-youtube{background:none}
.top-social-icons a i.icon-twitter{background:#359BED;padding:7px}
.top-social-icons a:hover i.icon-twitter{background:none}
.top-social-icons a i.icon-facebook{background:#3C5B9B;padding:7px}
.top-social-icons a:hover i.icon-facebook{background:none}
.top-social-icons a i.icon-instagram{background:#DB97BE;padding:7px}
.top-social-icons a:hover i.icon-instagram{background:transparent}

Upvotes: 0

roo2
roo2

Reputation: 6071

Do you have a <!doctype html> decleration at the top of your html page? from w3Schools ie requires it when using the :hover psedoclass on elements other than as (you're using it on i tags)

Note: In IE there must be declared a <!DOCTYPE> for the :hover selector to work on other elements than the <a> element.

Upvotes: 1

Related Questions