Question

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

这可能会使这个更复杂的是我想在水平行中排列三张这样的照片;对于每张图片，用户可以将鼠标悬停在它们上，然后单击列表中的项目。

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

Answer 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

Answer 2

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

<div class="wrapper">
<img src="http://www.gettyimages.in/gi-resources/images/Embed/new/embed2.jpg" class="showDiv" width="200px" height="200px" alt="image" />
<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%;
}

将鼠标悬停在图片上可以获得包含html / JavaScript中多个链接的框

2 个答案: