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

【问题标题】：IE CSS Hover Issue with Facebook/Twitter/+1 ButtonsFacebook/Twitter/+1 按钮的 IE CSS 悬停问题
【发布时间】：2011-11-07 15:20:03
【问题描述】：

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

li:hover .pinkBar{display:block;}

不幸的是，如果在 IE 中悬停任何共享按钮 iframe，悬停似乎会取消并且粉红色条再次隐藏。即使共享按钮包含在悬停的<li> 中。当我的鼠标进入其中一个共享按钮的 iframe 时，IE 的行为就像我悬停在 <li> 上一样。

有人对这个仅限 IE 的问题有任何想法或解决方案吗？

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

【问题讨论】：

+1 有趣...你应该把它写下来作为答案并接受它。
我认为我只需要等待 24 小时来回答我自己的问题。
哦不，不必等待 24 小时。完整答案如下。

标签： css facebook internet-explorer hover

【解决方案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

【讨论】：