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

I'm working on my wordpress website right now, and there's one section where I have to create a gallery where the pictures would show some text and a button under the text when you over on the image. I'm trying to use a:hover but I can only make some changes. How do I show a button when you hover on the image? Please any help would be appreciated. Thanks a bunch

我现在正在我的wordpress网站上工作,有一个部分我必须创建一个图库,当你在图像上时,图片会显示一些文字和文本下的按钮。我正在尝试使用:悬停但我只能进行一些更改。将鼠标悬停在图像上时如何显示按钮?请任何帮助将不胜感激。谢谢你们

3 个解决方案

#1

Here's a quick example for you. You probably need to modify it to fill your needs.

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

Here's a fiddle: http://jsfiddle.net/829mL4z1/1/

这是一个小提琴:http://jsfiddle.net/829mL4z1/1/

HTML markup

 <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;
 }

#2

You could do something like:

你可以这样做:

HTML:

<div id="wrapper">
   <img src="thing.jpg">
   <button>Blah</button>
</div>

CSS:

#wrapper button { display: none; }
#wrapper:hover button { display: block; }

I'll leave you to handle the positioning.

我会告诉你处理定位。

#3

For all events in a web page, generally we prefer scripting languages like Javascript and Jquery . One simple example using jQuery is depicted in the following link. You can see all three sections: HTML, CSS, Javascript and the Output simultaneously here:

对于网页中的所有事件,通常我们更喜欢脚本语言,如Javascript和Jquery。使用jQuery的一个简单示例在以下链接中描述。您可以在此处同时查看所有三个部分:HTML,CSS,Javascript和输出:

Example

#1