javascript - 悬停时更改图像

Question

我需要一个由图像组成的菜单，当有人将鼠标悬停在它周围时，图像应该会发生变化。

HTML

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

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

我面临的问题是，当我在菜单项周围悬停时，悬停时要显示的图像显示在旧图像的后面。此外，显示的悬停背景图像的宽度和高度非常小。请帮忙。谢谢

Answer 1

如前所述，不需要 JS 解决方案。

另一种方法是加载两个图像并使用 :hover 事件隐藏/显示它们。像这样:

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}