скрыть фоновое изображение, когда наведенное изображение появляется с помощью css

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");
}
);