javascript - 将鼠标悬停在图像上时如何输出按钮和文本？我需要使用 JQuery 吗？

Question

我现在正在我的 wordpress 网站上工作，有一个部分我必须创建一个画廊，当您在图像上移动时，图片会在其中显示一些文本和文本下方的按钮。 我正在尝试使用 a:hover 但我只能进行一些更改。将鼠标悬停在图像上时如何显示按钮？ 请提供任何帮助，我们将不胜感激。非常感谢

Answer 1

这是一个简单的例子。您可能需要对其进行修改以满足您的需求。

这是一个 fiddle :http://jsfiddle.net/829mL4z1/1/

HTML 标记

 <div class="holder">
    <img alt="your-alt" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png"/>
    <div class="info">
       My text<br/>
       <input type="button" value="Button"/>
    </div>
 </div>

jQuery

$(document).ready(function(){
   $('.holder').on('mouseenter',function(){
      $(this).find('.info').fadeIn();
      });

   $('.holder').on('mouseleave',function(){
      $('.info').fadeOut();
      });
  });

CSS

.holder{
  position: relative;
  border: 1px solid #000000;
  width: 100px;
  }

.info{
  position: absolute;
  display: none;
  background: rgba(255,255,255,0.8);
  color: #000000;
  text-align: center;
  bottom: 0;
  z-index: 100;
  width: 100%;
  }

img{
 width: 100px;
 }