html - 当使用 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;
}​