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

Posted 2023-05-08

【中文标题】Facebook/Twitter/+1 按钮的 IE CSS 悬停问题

【英文标题】：IE CSS Hover Issue with Facebook/Twitter/+1 Buttons

【发布时间】：2011-11-07 15:20:03

【问题描述】：

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

li:hover .pinkBardisplay:block;

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

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

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

【问题讨论】：

+1 有趣...你应该把它写下来作为答案并接受它。

我认为我只需要等待 24 小时来回答我自己的问题。

哦不，不必等待 24 小时。完整答案如下。

【参考方案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 .pinkBardisplay:block;//old method
li.hover .pinkBardisplay:block;//new method