如何将图像链接与 HTML 和 CSS 一起使用时，悬停时在其他位置显示图像

How to display an image in a different spot on hover when using image links with HTML and CSS

本文关键字：图像 悬停 位置 显示图 显示 其他 一起 链接 HTML CSS      更新时间：2023-09-26

>我有六张图像是链接（我的主导航），我希望它们在悬停时每个图像都显示不同的图像（在页面上的不同位置）。这可以在HTML和CSS中单独完成吗？还是我需要 JavaScript？这是我的代码。提前谢谢。

    <div id="mainnav">
        <div id="gdpbutton">
            <a href="gdp.html"><img id="gdpImg" src="images/GDP-button.png"/></a>
        </div>
        <div id="gdwbutton">
            <a href="gdw.html"><img id="gdwImg" src="images/GDW-button.png"/></a>
        </div>
        <div id="wdmbutton">
            <a href="wdm.html"><img id="wdmImg" src="images/WDM-button.png"/></a>
        </div>
        <div id="wddbutton">
            <a href="wdd.html"><img id="wddImg" src="images/WDD-button.png"/></a>
        </div>
        <div id="webdevbutton">
            <a href="webdev.html"><img id="webdevImg" src="images/WEBDEV-button.png"/></a>
        </div>
        <div id="miscbutton">
            <a href="misc.html"><img id="miscImg" src="images/MISC-button.png"/></a>
        </div>
    </div>

这是我主页的图像，其中包含我正在谈论的图像链接。当您将鼠标悬停在其中一个链接上时，我希望在所有图像链接中间的中间圆圈中出现不同的图像。希望这能帮助你们理解我想做什么。谢谢！

首页图片

我认为

这可能会单独使用 css 解决您的问题。找到这个链接 jsfiddle

#hover 
{
 display: none;
}
#image:hover + #hover 
{
 display: block;
}
嗨，

如果您只想在悬停时显示图像，与其在HTML本身中给出图像，不如在CSS中给出，例如：

.gdwbutton ： hover { background-image：url（"images/GDP-button.png"）; }

希望这对你有帮助。

你可以试试这个例子代码：

#mainnav{
  width:170px;
  height:20px;
}
#mainnav > div{
  position:absolute;
  top:0;
  left:0;
  width:20px;
  height:20px;
}
#mainnav:hover #gdpbutton{
  position:absolute;
  top:0;
  left:0px;
}
#mainnav:hover #gdwbutton{
  position:absolute;
  top:0;
  left:50px;
} 
#mainnav:hover  #wdmbutton{
  position:absolute;
  top:0;
  left:80px;
} 
#mainnav:hover  #wddbutton{
  position:absolute;
  top:0;
  left:110px;
} 
#mainnav:hover #webdevbutton {
  position:absolute;
  top:0;
  left:140px;
} 
#mainnav:hover #miscbutton{
  position:absolute;
  top:0;
  left:170px;
} 
img{
  max-width:100%;
}

演示

JsFiddle here

$(document).ready(function() {
  $("#mainnav a img").each(function(index, element) {
    // element == this
    $(element).hover(function() {
      var src = $(this).attr("src");
      $("#msg").text(src);
      $("#image").attr("src", src);
    });

    $(element).mouseout(function() {
      $("#image").attr("src", "");
    })
  });
});

如果您需要图像悬停和定位是动态的，那么您需要使用Javascript。如果您只有 6 张图像，那么您可以通过 CSS 来完成。您的问题对场景以及您想要实现的目标不太清楚。因此，我们无法在代码中为您提供任何解决方案。

相关文章：