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

Question

For some reason, my :hover isn't working. Here's my CSS code:

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

And my HTML

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

Any ideas on why this isn't working?

Answer 1

It's working - you just have to correct your CSS rules.

For border you have to specify its width and style, not just color. Same for the box-shadow - the color itself isn't enough.

 .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

Seems to be working just fine:

• http://jsfiddle.net/DpBRY/

You have some pink background on hover... Firefox 11.0 on Ubuntu 11.10 here.

Here's an update for border and box-shadow :

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

but you can of course tune to your taste. Hope this helps.

Answer 4

也许header.png是不透明的？