CODEWITHSUNDEEP
cssfacebookinternet-explorerhover
wilsonpage
wilsonpage

Reputation: 17610

IE CSS Hover Issue with Facebook/Twitter/+1 Buttons

I'm having an annoying issue with IE that involves social media sharing buttons. When each list item is hovered I reveal the pink bar below the item using simple CSS:

li:hover .pinkBar{display:block;}

Unfortunately in IE when if then hover any of the share button iframes the hover seems to cancel and the pink bar in hidden again. Even though the share buttons are contained within the <li> being hovered. IE behaves as though I have hovered off the <li> when my mouse enters the iframe of one of the share buttons.

Does anyone have any ideas or solutions regarding this IE only issue?

enter image description here

UPDATE: Problem fixed by using javascript to manually add and remove a class named 'hover' on mouseIn and mouseOut. I applied the same style this .hover class.

Upvotes: 1

Views: 601

Answers (1)

wilsonpage
wilsonpage

Reputation: 17610

Problem fixed by using javascript to manually add and remove a class named 'hover' on mouseOver and mouseOut. I applied the same style to .hover class instead of :hover

JS:

var articleOver = function(){
    $(this).addClass('hover');
}
var articleOut = function(){
    $(this).removeClass('hover');
}

$('li').hover(articleOver, articleOut);

CSS:

li:hover .pinkBar{display:block;}//old method
li.hover .pinkBar{display:block;}//new method

Upvotes: 2

Related Questions