当鼠标悬停图像使用css时隐藏背景图像。

I am using CSS for hover and it works, but the hover image allow the background image (pic_normal) to display like transparent behind the image(pic_hover).

我正在使用CSS进行悬停，它可以工作，但是悬停图像允许背景图像(pic_normal)在图像(pic_hover)后显示为透明的。

How to display only the hover image when mouse over on it?

如何只显示鼠标悬停图像?

HTML

HTML

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

CSS

CSS

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

3 个解决方案

#1

Your CSS works just fine as intended - it changes the background of your img element. Think about the pic_normal.png as the content of your element (e.gg. some text). When you changing the background the content doesn't change.

你的CSS可以正常工作——它改变了img元素的背景。考虑pic_normal。png作为元素的内容(e.gg)。一些文本)。当你改变背景时，内容不会改变。

Try this instead - http://jsfiddle.net/WvKye/

试试这个- 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;
}

#2

Use this:

用这个:

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

#3

I think u need some javascript for that Using Jquery u can do like this

我认为你需要一些javascript来使用Jquery u可以这样做。

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

#1