使用Facebook / Twitter / + 1按钮的IE CSS Hover问题

Question

我在使用社交媒体共享按钮的IE时遇到了烦人的问题。当每个列表项悬停时，我使用简单的CSS显示项目下方的粉红色条：

li:hover .pinkBar{display:block;}

不幸的是在IE中当if然后悬停任何分享按钮iframe时，悬停似乎取消并且粉红色条再次隐藏。即使共享按钮包含在正在悬停的<li>中。当我的鼠标进入其中一个共享按钮的iframe时，IE的行为似乎已经从<li>悬停。

是否有人对此仅IE问题有任何想法或解决方案？

更新 通过使用javascript手动添加和删除mouseIn和mouseOut上名为“hover”的类来解决问题。我在这个.hover类中使用了相同的样式。

Answer 1

通过使用javascript在mouseOver和mouseOut上手动添加和删除名为“hover”的类来解决问题。我将相同的样式应用于.hover类，而不是: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