想让悬停

我在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

回答

相关问题