javascript - 将鼠标悬停在图像上后，如何在图像上显示菜单？

Question

我正在创建一个投资组合页面，其中包含我所从事的不同工作的图像。当我将鼠标悬停在图像上时，我希望它变灰(好像有一个 div 以 0.4 的不透明度重叠它)并在图像上弹出几个按钮(查看源代码、查看演示)。

我想将这些“投资组合元素”放在三个引导列中。我看着在它上面重叠一个 div，它会隐藏直到使用 z-index 悬停，但我无法弄清楚如何定位它，同时还使用 Bootstrap 来保持它的响应。

这是我目前所拥有的。还有其他更简单的方法吗？

<div id="portfolio-page">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <h2 class="center-text">My Portfolio</h2>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2" id="portfolio-items">
            <div class="row">
                <div class="col-lg-4">
                    <div class="portfolio-item">
                        <img src="includes/img/headers.jpg" class="img-responsive"></img>
                    </div>
                </div>            
            </div>
        </div>        
    </div>
</div>

Answer 1

你只需要一点 CSS 就可以做到这一点。

我已将 .portfolio_text 的不透明度设置为 0，但当您将鼠标悬停在其父级 .portfolio 上时，我将其设置为 1。我还添加了一个过渡，因此它会淡出而不是突然出现。

.portfolio {
  position: relative;
  height: 200px;
  width: 200px
}

.portfolio img,
.portfolio_text {
  width: 100%;
  height: 100%
}

.portfolio_text {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: #fff;
  top: 0;
  left: 0;
  background: rgba(100, 100, 100, .4);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.25, .8, .25, 1)
}

.portfolio:hover .portfolio_text {
  opacity: 1
}

<div class="portfolio">
  <img src="http://silayexportinc.com/wp-content/uploads/2016/09/placeholder-3.jpg" />
  <div class="portfolio_text">
    <span>Look at my Buttons</span>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>
</div>