Question

我正在使用CSS进行悬停并且它可以正常工作，但悬停图像允许背景图像（pic_normal）在图像后面显示为透明（pic_hover）。

如何在鼠标悬停时仅显示悬停图像？

HTML

<img id="first" src="images/clients/pic_normal.png" />

CSS

#first img:hover {
    background-image: url("/images/clients/pic_hover.png");
    background-repeat: no-repeat;
}

Answer 1

您的CSS按预期工作正常 - 它会更改img元素的背景。将pic_normal.png视为元素的内容（例如，某些文本）。当您更改背景时，内容不会更改。

请改为尝试 - http://jsfiddle.net/WvKye/

<div id="first"></div>

#first {
    background: url("images/clients/pic_normal.png") no-repeat;
    height: 300px;
    width: 300px;
}

#first:hover {
    background: url("images/clients/pic_hover.png") no-repeat;
}

Answer 2

使用此：

<img onMouseOver="this.src='images/clients/pic_normal.png'"
 onMouseOut="this.src='images/clients/pic_normal.png'"
 src="images/clients/pic_normal.png"/>

Answer 3

我想你需要一些javascript 使用Jquery你可以这样做

$("#first").hover(function()
{
 $(this).attr("src","/images/clients/pic_hover.png");
},function()
{
  $(this).attr("src","/images/clients/pic_normal.png");
}
);

使用css显示悬停图像时隐藏背景图像

3 个答案: