使用CSS/HTML在悬停时更改图像

Question

使用CSS/HTML在悬停时更改图像

84

我遇到了一个问题，当鼠标悬停时，我已经设置了一张图片来显示另一张图片，但是第一张图片仍然出现，新的图片没有改变高度和宽度，重叠在另一张图片上。我对HTML/CSS还是很新手，可能错过了一些简单的东西。这是代码：

<img src="LibraryTransparent.png" id="Library">

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}

- user2704743

22个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phong Ly · Answer 1

只需使用Photoshop创建两个相同的图像，第一个是您想要的外观，第二个是当鼠标悬停时想要的外观。我将图像包装在<a>标记中，因为我假设这是您想要的。对于此示例，我正在制作一个Facebook图标，它是去色的，但是当鼠标悬停时，它将显示Facebook的蓝色。

<a href="www.facebook.com"><img src="place of 1st image" onmouseover="this.src='place of 2nd image'" onmouseout="this.src='place of 1st image'"></a>

- wolfsshield · Answer 2

我遇到了类似的问题。

我的按钮定义如下：

<button  id="myButton" class="myButtonClass"></button>

我的背景样式如下：

#myButton{ background-image:url(img/picture.jpg)}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

当我将它切换为：

#myButton{}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

悬停特效运行良好。

（仅涉及背景图片更改，不考虑其他属性如图像大小和位置或容器大小和位置）