Question

这看起来很简单，我很困惑为什么它不起作用...我想在滚动它时改变DIV的背景图像。它适用于Mac上的chrome和FF - 但不是FF，IE上的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>

重新：鲶鱼

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

Answer 1

并非所有浏览器都支持除了锚标记<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;}

Answer 2

如果您必须使用<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;}

Answer 3

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

媒体创建问题之前的第一个切片。使用此<link rel="stylesheet" href="media/css/mystandard.css"/>

翻转时的背景颜色变化在IE，FF中不起作用

3 个答案: