滚动时的背景颜色更改在 IE、FF 中不起作用答案

【问题标题】：background-color change on rollover not working in IE, FF滚动时的背景颜色更改在 IE、FF 中不起作用
【发布时间】：2010-08-13 21:07:10
【问题描述】：

这看起来很简单，我很困惑为什么它不工作......我想在滚动时更改 DIV 的背景图像。它适用于 Mac 上的 chrome 和 FF - 但不适用于 PC 上的 FF、IE

CSS - /media/css/mystandard.css

div.flipper {background-color: #FFFFFF;}
div.flipper:hover {background-color: #F8FBFE;}

HTML

<HTML> <HEAD> <link rel="stylesheet" href="/media/css/mystandard.css"/></HEAD><BODY>        
<div class="flipper" >  
hello stack overflow!               
</div>
</BODY></HTML>

re:鲶鱼

感谢您的提示。不幸的是，我不能使用标签，因为我计划更改完整 DIV 的背景颜色（有点像 twitter.com Tweets 翻转视图），并且不想将 div 中的所有文本都设为链接

【问题讨论】：

仅供参考，您的 HEAD 元素不应位于 BODY 内。
aaah，你说得对，这只是一个复制/粘贴错字 - 错误修复
它应该在 FF 和 IE7+ PC 上都可以工作，所以您如何链接样式表（“在此处导入 CSS”）肯定有问题 - 我们可以提供完整的页面或在线测试吗？
@darma 查看上面更新的 html 代码
IE 和 Firefox 哪个版本？

标签： html css rollover

【解决方案1】：

如果您必须使用<div>，则需要使用 javascript 来进行悬停。为了简单起见，我建议使用 jQuery：

$("div.flipper").hover(
  function() { $(this).addClass("hover"); },
  function() { $(this).removeClass("hover"); }
);

然后将您的 CSS 更改为：

div.flipper {background-color: #FFFFFF;}
div.hover   {background-color: #F8FBFE;}

【讨论】：

jquery 函数应该放在哪里？
没关系，谢谢！ stackoverflow.com/questions/275891/…
您有相关页面的链接吗？
不幸的是，它在防火墙后面。我修复了显示隐藏问题，但现在 IE 出现了一个问题，即翻转并不总是有效。看我的新帖子stackoverflow.com/questions/3550259/…

【解决方案2】：

并非所有浏览器都支持除锚标记<a> 之外的任何东西上的:hover 伪属性。您必须将您的 html 更改为

<HTML><BODY> <HEAD> import CSS here </HEAD>     
<div class="flipper" >
<a href="#">  
hello stack overflow!
</a>               
</div>
</BODY></HTML>

你的css到

div.flipper a{background-color: #FFFFFF;}
div.flipper a:hover {background-color: #F8FBFE;}

【讨论】：

【解决方案3】：

您的问题在于您的 CSS 链接。你有<link rel="stylesheet" href="/media/css/mystandard.css"/>

媒体产生问题之前的第一片。使用这个<link rel="stylesheet" href="media/css/mystandard.css"/>

【讨论】：