想讓懸停

我在HTML初學者資訊崩潰，並想知道如果你能告訴我如何懸停東西添加到我的代碼：想讓懸停

<div class="container text-center" style="padding-top: 70px;"> 
    <div class="row"> 
     <div class="col-sm-4"> 
      <p class="text-center"><strong>Corvo Attano</strong></p><br> 
      <a href="#demo" data-toggle="collapse"> 
       <img src="images/corvo.jpg" class="img-circle person" alt="Random Name" width="200" height="200"> 
      </a> 
      <div id="demo" class="collapse"> 
       <p>Dishonored 1, Dishonored 2, Brigmore Witches</p> 
       <p>Bears the Outsider's Mark</p> 
       <p>Father of Emily Kaldwin</p>  
      </div> 
     </div>

的HTML的外觀是人物圖片。現在，我擁有它，當你點擊圖片時，#demo出現在下面。我想知道是否可以幫助我弄清楚如何在鼠標懸停時顯示它，並在鼠標移開時消失。謝謝！

來源

2017-02-16 Monkeyjesus

如果您使用的是標準JavaScript，則有onmouseover和onmouseout屬性。
使用它們像這樣：

<img src="..." onmouseover="showPic()" onmouseover="hidePic()" /> 
<script>function showPic(){...} function hidePic(){...}</script>

當你擁有jQuery的，你還可以使用的.mouseover()和.mouseout()功能。

但是，您在Bootstrap中使用了Collapse庫，這意味着您已經具有功能和hidePic。
根據the documentation，對象data-toggle:collapse與調用.collapse()基本相同。
所以要實現你想實現什麼，下面應該工作：

<a href="#demo" onmouseover="$('#demo').collapse('show')" onmouseout="$('#demo').collapse('hide')"> ... </a>

來源

2017-02-16 04:55:03 virhonestum

這就是對雖然顯示圖片？因爲我試圖找出如何在圖片下顯示段落。 http://webdesign.eastsideprep.org/~spedersen/client1/char.html 如果您單擊其中一個圖片，該段落將顯示，然後在您再次單擊時隱藏。我想知道當您移動鼠標時是否可以顯示該段落，並在移開鼠標時隱藏該段落。 – Monkeyjesus

我的道歉，我沒有考慮Bootstrap方面的事情。但是我編輯了我的答案以包含引導程序庫。請繼續嘗試，並告訴我，如果這對你有用。 – virhonestum

這工作！非常感謝你！ – Monkeyjesus

回答

相關問題