Question

我需要在我的网页上放置一个图片链接，当它们悬停在我希望它更改为另一个图像的图像上时。我无法做到这一点。

我的html中的这一行：

<a href="mailto:ellie@example.com?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;

}

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

Answer 1

整个第二个选择器应该是

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

您无需重复所有重复的规则，也无需在选择器中包含.item。您可以将:hover pseduoclass直接添加到#id选择器。

Answer 2

删除#somethingtosay-ballon和.item:hover之间的空格。它应该是：

#somethingtosay-ballon.item:hover

Answer 3

如果您想更改somethingtosay-ballon的背景，请尝试

#somethingtosay-ballon:hover

在<a> tag</a>中悬停时更改背景图片

3 个答案: