如何显示前景图像然后在悬停时隐藏？

Question

如何在前景中显示图像，然后当用户将鼠标悬停在该图像上时，图像会消失，用户可以看到它背后的内容。

我尝试了display: none 和visibility: none 的组合，但图像无法悬停或完全显示

查看

<div class="social-stuff">
  <div class="like-button">
    <%= link_to like_challenge_path(:id => @challenge.id), class: "btn", method: :post do %>
      <span class='glyphicon glyphicon-thumbs-up'></span> Like
    <% end %>
  </div>

  <div class="text-background">
    <%= render "comments/comments" %>
    <%= render "comments/form" %>
  </div>
</div>

css

.social-stuff {
  background: url('goal-setting.jpeg');
  &:hover {
   ??
  }
}

Answer 1

我在这里为您创建了一个CodePen。我已经通过两种方式做到了。使用 CSS 更改悬停时图像的不透明度，并使用 jQuery 为图像的不透明度设置动画。下面是代码。目前已设置为使用 jQuery，但取消注释 css hover 部分，并注释 jQuery，CSS 版本将起作用。希望这会有所帮助。

HTML

<div class="image-container">
  <img id="image-foreground" src="https://cdn2.vox-cdn.com/thumbor/CA1U4gMJ2xG2s-tSfPTKJdiVFxw=/0x0:1687x1125/1280x854/cdn0.vox-cdn.com/uploads/chorus_image/image/48681987/titan-aerospace-drone-google.0.0.jpeg" alt="" />
  <div class="text-wrapper">
    <p id="text-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam delectus, optio qui, magni suscipit error aperiam nemo veritatis quod sunt at perferendis accusantium quaerat. Repudiandae quaerat inventore voluptatum, sit eos.</p>
  </div>
</div>

CSS

.image-container {
  background: black;
  position: relative;
  height: auto;
  width: 30vw;

  #image-foreground {
    position: absolute;
    height: inherit;
    width: inherit;
    z-index: 2;
    opacity: 1;

    // &:hover {
    //   opacity: 0;
    // }
  }
  .text-wrapper {
    position: absolute;
    width: 20vw;
    color: white;
    top: 15vh;
    left: 5vw;
    z-index: 1;
    background: black;
  }
}

jQuery

​​>

$(document).ready(function(){
  $('#image-foreground').hover(function(){
    $(this).animate({
      opacity: 0
    },500, function(){
      $(this).animate({
        opacity: 1
      },500)
    });
  });
})