在<a>标记中更改悬停时的背景图像

如何解决在<a>标记中更改悬停时的背景图像

| 我需要在网页上放置图片链接，当他们将鼠标悬停在图片上时，我希望将其更改为另一张图片。我在执行此操作时遇到了麻烦。 我在我的html中这一行：

<a href=\"mailto:[e-mail]?subject=test\" id=\"somethingtosay-ballon\" class=\"item\"> hello</a> 

我的CSS类是：

#somethingtosay-ballon
{   
    background-image: url(Images/button_email_upstate.png); 
    display:block;

    width:263px;
    height:167px;
    text-indent:-9999px; 
    position:absolute;
    top:643px;
    left:530px;


}
#somethingtosay-ballon .item:hover
{   
    background-image: url(Images/button_email_mouseover.png); 
    display:block;

    width:263px;
    height:167px;
    text-indent:-9999px; 
    position:absolute;
    top:643px;
    left:530px;

}

有人可以告诉我正确的方法吗？     

解决方法

        移去

#somethingtosay-ballon

和

.item:hover

之间的空间。它应该是：

#somethingtosay-ballon.item:hover

    ,        整个第二个选择器应为

#somethingtosay-ballon:hover
{   
    background-image: url(Images/button_email_mouseover.png); 
}

您不需要重复所有重复的规则，也不需要在选择器中包含

.item

。您可以将

:hover

pseduoclass直接添加到

#id

选择器。     ,        如果要更改ѭ9的背景，请尝试

#somethingtosay-ballon:hover