悬停在< a>中更改背景图片标签 [英] Changing background image on hover in <a> tag

问题描述

我需要在我的网页上放置图片链接，当它们悬停在我希望它更改为其他图片的图片上时。

我在我的html中这一行：

 < a href =mailto：[e-mail]？subject = testid =somethingtosay-ballonclass =item>你好< / A> 
  

我的css类是：

 ＃somethingtosay-ballon 
 {
 background-image：url（Images / button_email_upstate.png）; 
 display：block; 
 
 width：263px; 
 height：167px; 
 text-indent：-9999px; 
位置：绝对; 
 top：643px; 
 left：530px; 
 
 $ b} 
＃somethingtosay-ballon .item：hover 
 {
 background-image：url（Images / button_email_mouseover.png）; 
 display：block; 
 
 width：263px; 
 height：167px; 
 text-indent：-9999px; 
位置：绝对; 
 top：643px; 
 left：530px; 
 
} 
  

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

解决方案

删除＃somethingtosay-ballon 和<$ c $之间的空格C> .item：悬停。它应该是：

 ＃somethingtosay-ballon.item：hover 
  

I need to put an image link on my webpage, when they hover over the image I want it to change to another image. I am having trouble doing this.

I this line in my html:

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

my css classes are:

#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;

}

Can Anyone tell me the proper way to do this?

解决方案

Remove the space between #somethingtosay-ballon and .item:hover. It should be:

#somethingtosay-ballon.item:hover

这篇关于悬停在&lt; a&gt;中更改背景图片标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！