使用带有 HTML 和 CSS 的图像链接时如何在悬停时在不同位置显示图像答案

【问题标题】：How to display an image in a different spot on hover when using image links with HTML and CSS使用带有 HTML 和 CSS 的图像链接时如何在悬停时在不同位置显示图像
【发布时间】：2016-06-20 15:53:14
【问题描述】：

我有六张图片作为链接（我的主导航），我希望它们在悬停时分别显示不同的图片（在页面上的不同位置）。这可以单独在 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>

这是我的主页图片以及我正在谈论的图片链接。当您将鼠标悬停在其中一个链接上时，我希望在所有图像链接中间的中间圆圈中出现不同的图像。希望这可以帮助你们理解我正在尝试做的事情。谢谢！

homepage image

【问题讨论】：

如果您需要在hover 上切换到图像，可以在 css 和 html 上切换。但在另一种情况下，您可能需要 javascript
可能重复：stackoverflow.com/questions/9782328/…

标签： javascript html css hover mouseover

【解决方案1】：

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

【讨论】：

您可以在评论中提出这个问题。这不是答案
@SercanTimoçin OP 询问他是否可以使用 HTML-CSS 实现解决方案，或者他需要使用 Javascript。所以这回答了他的问题，即使你同意，关于这个问题的信息也不多。放松我亲爱的朋友，没有个人仇杀:)

【解决方案2】：

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", "");
    })

  });
});

【讨论】：

【解决方案3】：

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

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

demo

【讨论】：

【解决方案4】：

您好，如果您只想在悬停时显示图像，除了在 HTML 本身中提供图像之外，您还可以在 CSS 中提供：

.gdwbutton : hover { background-image:url("images/GDP-button.png"); }

希望对你有所帮助。

【讨论】：

【解决方案5】：

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

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

【讨论】：