Question

我是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出现在下面。我想知道你是否可以帮我弄清楚当我悬停鼠标时如何显示它，当我的鼠标离开时消失。谢谢！

Answer 1

如果您使用的是标准JavaScript，则会有onmouseover和onmouseout属性像这样使用它们：

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

当你有jQuery时，你也可以使用.mouseover()和.mouseout()函数。

但是，您正在Bootstrap中使用Collapse库，这意味着您已经拥有类似函数showPic和hidePic的功能。
根据{{3}}，data-toggle:collapse与在对象上调用.collapse()基本相同。
因此，要实现您想要实现的目标，以下内容应该有效：

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

想要在悬停时使信息崩溃

1 个答案: