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

How do I output a button and a text when I hover on an image? Do I need to use JQuery?

本文关键字：文本 按钮 JQuery 输出 图像 悬停 鼠标 何输出      更新时间：2023-09-26

我现在正在开发我的wordpress网站，其中有一个部分我必须创建一个库，当你浏览图像时，图片会显示一些文本和文本下的按钮。我正在尝试使用：悬停，但我只能做一些更改。当您将鼠标悬停在图像上时，我如何显示按钮？请提供任何帮助，我们将不胜感激。感谢一堆

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

这是一把小提琴：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;
 }

您可以执行以下操作：

HTML:

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

CSS：

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

我让你来处理定位。

对于网页中的所有事件，我们通常更喜欢脚本语言，如Javascript和Jquery。下面的链接中描述了使用jQuery的一个简单示例。您可以在这里同时看到所有三个部分：HTML、CSS、Javascript和Output：

示例

相关文章：