CSS选择器“悬停”不适用于我的HTML代码

Question

出于某种原因，我的:hover无效。这是我的CSS代码：

.image:hover
{
    border:#000000;
    background-color:#FF66FF;
    box-shadow:rgb(0,255,153);
}

我的HTML

 <div id="header">
    <a href="index.html"><img src="header.png" class="image" onload="ChangeColors(this)" /></a>
 </div>

关于为什么这不起作用的任何想法？

Answer 1

它正常工作 - 你只需要纠正你的CSS规则。

对于border，您必须指定其宽度和样式，而不仅仅是颜色。同样适用于box-shadow - 颜色本身还不够。

.image:hover {
  border: 2px solid #000000;
  background-color:#FF66FF;
  box-shadow: 10px 10px 5px rgb(0,255,153);
}

<div id="header">
  <a href="index.html"><img src="http://placehold.it/300x150" class="image" /></a>
</div>

Answer 2

class =“image”需要转移到A标签

Answer 3

似乎工作正常：

• http://jsfiddle.net/DpBRY/

你在悬停时有一些粉红色的背景......在Ubuntu 11.10上的Firefox 11.0。

以下是border和box-shadow的更新：

• http://jsfiddle.net/DpBRY/2/

但你可以根据自己的口味调整。希望这会有所帮助。

Answer 4

也许header.png不透明？