將鼠標懸停在圖像上時，如何輸出按鈕和文本？ 我需要使用JQuery嗎？

Question

我現在正在我的wordpress網站上工作，在一個部分中，我必須創建一個圖庫，在該圖庫中，當您瀏覽圖像時，圖片會顯示一些文本，並在文本下方顯示一個按鈕。 我正在嘗試使用a：hover，但是我只能進行一些更改。 將鼠標懸停在圖像上時如何顯示按鈕？ 請任何幫助將不勝感激。 謝謝一大堆

Answer 1

您可以執行以下操作：

HTML：

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

CSS：

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

我讓你處理定位。

Answer 2

這是一個簡單的例子。 您可能需要對其進行修改以滿足您的需求。

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

Answer 3

對於網頁中的所有事件，通常我們更喜歡Javascript和Jquery之類的腳本語言。 以下鏈接描述了一個使用jQuery的簡單示例。 您可以在此處同時看到所有三個部分：HTML，CSS，Javascript和輸出：

例