悬停时更改图像

一尘不染

悬停时更改图像

css

我需要一个包含图像的菜单，当有人将鼠标悬停在菜单上时，图像应该会更改。

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

我面临的问题是，当我将 鼠标悬停 在菜单项周围时，要显示在悬停上的图像显示在旧图像 的背面
。此外，显示的悬停背景图像的宽度和高度很小。请帮忙。谢谢！[在此处输入图片描述] [1]

阅读 200

2020-05-16

共1个答案

一尘不染

将此代码放在结束body标签之前，

<script  type='text/javascript'>
$(document).ready(function(){
    $(".home").hover(
        function() {$(this).attr("src","images/aboutR.png");},
        function() {$(this).attr("src","images/about.png");
    });
});
</script>

将课程首页放置在img标签中。做完了完美运作。

2020-05-16