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

发布于 2025-01-07 02:44:44 字数 472 浏览 3 评论 0原文

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

原文

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).

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

久光 2025-01-14 02:44:44

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

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.

Try this instead - 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;
}

回复收藏 0 原文

一束光，穿透我孤独的魂 2025-01-14 02:44:44

使用这个：

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

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"/>

回复收藏 0 原文

不喜欢何必死缠烂打 2025-01-14 02:44:44

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

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

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

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

回复收藏 0 原文

~没有更多了~