悬停时更改图像

IT技术 javascript jquery html css
2021-02-24 08:16:29

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

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

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

6个回答

如前所述，不需要 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{
   显示：无
}
.image_on, #home:hover .image_off{
   显示：块
}
这很好用。可以在那里添加所用图像的宽度，以便更精确！
2021-05-09 08:16:29

这是一个 js/jquery 解决方案

//should go inside your <head> tag
function onHover()
{
    $("#menuImg").attr('src', 'images/aboutR.png');
}

function offHover()
{
    $("#menuImg").attr('src', 'images/about.png');
}

html：

<div id="menu" >  
  <a href="#" id="home">
    <img id="menuImg" src="images/about.png" alt="logo" onmouseover="onHover();" 
      onmouseout="offHover();" />
  </a>
</div>

这是一个工作示例。快乐编码:)

将此代码放在结束正文标记之前，

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

将class置于img标签中。完毕。完美运行。

虽然，它有效，但在我获得足够的答案投票反馈之前不会接受它。谢谢
2021-04-29 08:16:29

这有效：

<html>
<head>
<title>Example</title>
<style type="text/css">
#menu {
    width: 400px;
    height: 142px;
    margin-left: 353px;
    margin-top: -70px;
    padding-bottom: 16px;
}

#menu:hover {
    background: url(lPr4mOr.png);
    background-repeat: no-repeat;
}
</style>
</head>
<body>
    <div id="menu">
        <a href="#" id="home"><img src="lPr4m.png" alt="logo" /></a>
    </div>
</body>
</html>

（为了方便制作页面，图像名称已更改。）

删除img标签，并将#home（和任何其他菜单项）的宽度和高度设置为图像的宽度和高度。

此外，将内容设置为alt图像的任何内容（出于可访问性目的），然后设置text-indent属性以便将其移出页面。

目前，当您悬停时，它正在更改背景图像，但img标签在顶部，并且始终如此。

HTML

<div id="menu" >  
  <a href="#" id="home">Home</a>
</div>

CSS

#menu{
  margin-left: 353px;
  margin-top: -70px;
  padding-bottom: 16px;
}
#home{
  background:transparent url(images/about.png);
  width: 400px;
  height: 142px;
  z-index:1;
  text-indent: -9999em;
}
#home:hover{
  background:url(images/aboutR.png);
  z-index:2;
}
即使我指定了宽度和高度，背景也会只显示在标签内的文本
2021-05-11 08:16:29
其它你可能感兴趣的问题
上一篇在构造函数中定义原型方法 下一篇d3 力导向布局 - 链接距离优先