在悬停时更改图像 [英] Changing image on hover

问题描述

我需要一个由图像组成的菜单，当有人徘徊在它周围时，图像应该会改变。

I need a menu consisting of images and the images should change when someone hover around it.

<div id="menu" >  
    <a href="#" id="home"><img  src="images/about.png" alt="logo" /></a>
</div>

CSS

CSS

#menu {
        margin-left    : 353px;
        margin-top     : -70px;
        padding-bottom : 16px;
}

#home {
        background     : transparent url(images/about.png);
        z-index        : 1;
}

#home:hover {
        background     : url(images/aboutR.png);
        z-index        : 2;
}

我面临的问题是，当我悬停在菜单项周围，悬浮显示的图像会在旧图像的 后面显示。此外，显示的悬浮背景图片在宽度和高度上非常小。请帮助。感谢
！[enter image description here] [1]

The problem I am facing is that when I hover around the menu item, the image to be displayed on hover is displayed at the back of the old image. Moreover, the hover background image displayed is very small in width and height. Please help out. Thanks ![enter image description here][1]

推荐答案

如前所述， 。

另一个是通过加载图像和隐藏/显示它们：hover事件。像这样：

Another was of doing it is by loading both images and hiding/showing them with the :hover event. Something like this:

HTML：

<a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="image_off" src="images/aboutR.png" alt="logo" /></a>

CSS：

..

.image_off, #home:hover .image_on{
   display:none
}
.image_on, #home:hover .image_off{
   display:block
}
..

这篇关于在悬停时更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！