Question

当鼠标滑过图像时，我正在尝试进行图像更改，但我必须使用CSS而不是java脚本。我得到的图像显示，但它出现在第一张图片后面，它不会取代它。

<a href="http://google.com"><img id="rollover" src="cat.jpg" width="250" height="188" alt="Cat"></a>

#rollover:hover {background-image: url(dog.jpg);} 
img {padding: 5px;}

Answer 1

请勿使用img标记。使用a本身：

a
{
    display:inline-block;
    width: 250px;
    height: 188px;
    background: red;
} 
a:hover
{
    background: blue;
}

<a href="http://google.com"></a>

Answer 2

也可以通过CSS设置第一张图片。

<a href="http://google.com"><div id="rollover" width="250" height="188"></div></a>

#rollover {
  background-image: url(cat.jpg);
}

#rollover:hover {
  background-image: url(dog.jpg);
}

Answer 3

您可以拥有两个图片并切换显示属性example

＆＃13;

    #dog{
        display: none;
        }
    #cambio:hover > #cat{
        display: none;
    }
    
    #cambio:hover > #dog{
        display:block;
        
    }

＆＃13;

   <a href="#" id="cambio">
        <input type="button" id="dog" value="Perro" />
        <input type="button" id="cat" value="Gato" />
    </a>

＆＃13;

Answer 4

您不需要A ...的其他元素

<a href="http://google.com" id="rollover"> </a>

#rollover {   background-image: url(cat.jpg); 
     width: 250px; height: 188px; 
     display: block;
}
#rollover:hover {   background-image: url(dog.jpg);  }

CSS：如何在翻转时进行图像更改

4 个答案: