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 i开发者_Python百科n 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?

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.

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