将鼠标悬停在图像上以获取一个带有 html/JavaScript 中的多个链接的框

Posted 2023-03-06

【中文标题】将鼠标悬停在图像上以获取一个带有 html/JavaScript 中的多个链接的框

【英文标题】：Hover over image to get a box with multiple links in html/JavaScript

【发布时间】：2018-05-15 04:34:18

【问题描述】：

我想这样当用户将鼠标悬停在我网站上的图片上时，他们会得到一个与图片相同大小的灰色框，并且灰色框内是一个列表；列表中的每个项目都链接到不同的站点。我不知道该怎么做；当用户将鼠标悬停在图像上时，我只能找到有关如何用其他图像替换图像的教程。我不想要那个；我想用一个本身包含多个链接的框替换图像。我不需要一个具体的答案，而是需要一个关于如何做到这一点的一般想法。你们开发人员如何做到这一点？

让这件事变得更复杂的是，我想像这样将三张图片排成一排；对于每张图片，用户可以将鼠标悬停在它们上面，然后单击列表中的一个项目。

（我是 html 和 css 的新手，如果这是最好的解决方案，我愿意使用 javascript。提前感谢您的帮助！）

【问题讨论】：

了解这些 CSS 概念，您无需 JavaScript 即可做到：opacity、:hover 和 position: absolute

【参考方案1】：

这里是html：

<div id="container">
  <img id="image"/>
  <div id="overlay">
    <a href="www.site1.com">Link 1</a><br>
    <a href="www.site2.com">Link 2</a><br>
    <a href="www.site3.com">Link 3</a><br>
  </div>
</div>

这是css：

#container 
  position:relative;
  width:100px;
  height:100px;

#image 
  position:absolute;
  width:100%;
  height: 100%;
  background:black;//should be url of your image

#overlay 
  position:absolute;
  width:100%;
  height:100%;
  background:gray;
  opacity:0;

#overlay:hover 
  opacity:1;

JsFiddle link

【参考方案2】：

在包装器悬停时，只显示包含列表的 div，否则它应该被隐藏。这是工作示例。 HTML

<div class="wrapper">
<img src="http://www.gettyimages.in/gi-resources/images/Embed/new/embed2.jpg" class="showDiv"    />
<div class="showOnHover">
<ul>
<li>
<a href="http://www.gettyimages.in/gi-resources/images/Embed/new/embed3.jpg">link1</a>
</li>
<li>
  <a href="http://www.gettyimages.in/gi-resources/images/Embed/new/embed2.jpg">link2</a>
</li>
<li>
  <a href="http://www.gettyimages.in/gi-resources/images/Embed/new/embed1.jpg">link3</a>
</li>
</ul>
</div>
</div>

CSS

.wrapper
  position:relative;
  width:200px;

.wrapper:hover .showOnHover
  display:block !important;

.showOnHover
   display:none;
   position:absolute;
   top:0;
   height:100%;