使用 css 出现悬停图像时隐藏背景图像答案

【问题标题】：hide the background image when the hover image appears using css使用 css 出现悬停图像时隐藏背景图像
【发布时间】：2012-03-10 19:41:01
【问题描述】：

我正在使用 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;
}

【问题讨论】：

检查我的答案，我已经发布了一行代码......

标签： html css hover

【解决方案1】：

使用这个：

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

【讨论】：

【解决方案2】：

您的 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;
}

【讨论】：

：所以，我没有为设置 id，而是使用
来解决我的问题？
是的，这是最好的方法。如果您想使用<img>，您必须使用 JS 或 jQuery（如 Akhil 建议的那样），可靠性稍差（如果您考虑那些禁用 JS 的人）

【解决方案3】：

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

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

【讨论】：