悬停时在图库中的每个缩略图上显示多个菜单按钮

Question

我有一个缩略图图片库，其路径是从文件中动态加载的，并使用 float:left 以 5 行的形式组织。每行由 <br style="clear:both"> 个标签分隔。

我想在悬停时在每张图片上显示特定于每张图片的导航按钮。

我一直在关注 this tutorial approach 以尝试在图像上添加按钮。

每个图像都有一个 Javascript 生成的 img_container 标签，结构如下，最终将导航命令绑定到每个按钮：

<div class="img_container">
    <img class="menu_image" src="/houses/1.jpg">
    <div class="menu">
        <button>Floor Plan</button>
        <br>
        <button>History</button>
        <br>
        <button>Ownership</button>
    </div>
</div>

这里是 CSS 用来组织和 space 图片：

img {
    width: 295px;
    float: left;
    padding-top: 10px;
    padding-right: 10px;
}

如所附照片所示，图像在悬停时变暗，就像在教程演示页面上一样，但由于 float: left，按钮无论如何都会出现在页面中间的相同绝对位置图片悬停在上方。

我试图让 .menu 也有 float: left，这将按钮定位在它们的图像附近，但也使 .menu div 占用了不需要的 space 而不是漂浮在图像上。

如何让每个 individual 图像容器的按钮显示在它的图像上？

Answer 1

这里的诀窍是要意识到您不能将鼠标悬停在隐藏的元素上。将要隐藏的内容包裹在一个跨度中。

.container {
  display: flex;
  justify-content: center;
}

.img_container {
  position: relative;
}

.menu {
  position: absolute;
  top:0;
  display: flex;
  flex-direction: column;  
  align-items:center;
  border:solid 1px red;
  width:100px;
}

.menu button {
  visibility: hidden;
}

.menu:hover button {
  visibility: visible;
  width:80px; 
}

<div class='container'>
  <div class="img_container">
    <img class="menu_image" src="https://via.placeholder.com/100x200">
    <div class="menu">
      <button>Floor Plan</button>
      <button>History</button>
      <button>Ownership</button>
    </div>
  </div>
  <div class="img_container">
    <img class="menu_image" src="https://via.placeholder.com/100x200">
    <div class="menu">
      <button>Floor Plan</button>
      <button>History</button>
      <button>Ownership</button>
    </div>
  </div>
</div>

悬停时在图库中的每个缩略图上显示多个菜单按钮

Show multiple menu buttons over each thumbnail in gallery on hover

html

css