Facebook/Twitter/+1 按钮的 IE CSS 悬停问题

Question

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

li:hover .pinkBar{display:block;}

不幸的是，在 IE 中，如果将鼠标悬停在任何共享按钮 iframe 上，则悬停似乎会取消，粉红色条会再次隐藏。即使共享按钮包含在悬停的

内。当我的鼠标进入共享按钮之一的 iframe 时，IE 的行为就好像我已将鼠标悬停在

上一样。

有人对这个仅限 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