Question

非常感谢你的帮助。我是JavaScript的新手并且正在努力学习，但是需要考虑很多。在此期间，我的团队创建了一个网站，其中我们有5个不同的图像代表一种功能。在所有这些图像下，我们希望显示文本。将鼠标悬停在图像上时，相应的功能描述应显示在所有图像的中心。如果您移动到不同的图像，文本应该更改，但它应该在同一位置。

它有点像jQuery标签但有图像。

如果有人可以提供帮助，或指出我正确的方向，我真的很感激!!

Answer 1

使用jQuery，您可以使用hover方法在悬停时向图片文字添加animation css。要更新文本框中的文本，只需将图像文本放在悬停图像下方，然后您就可以使用jQuery找到该文本，并使用.text(newText)将该文本复制到文本框中。

要查找文本，首先必须使用.parent()（此处为li标记）转到图像的父级，然后您可以使用.find(class)转到图像文本。

有关.hover(handlerIn, handlerOut)的文档，请参阅文档here。

您正在寻找的内容的演示，请参阅下面的演示，并在此处jsFiddle。

致css：

overflow: hidden;标记上的li仅用于隐藏图片下方的文字。 li和图像具有相同的高度，因此文本是不可见的。

＆＃13;

var $textbox = $('#textbox'),
    handlerIn = function () {
        var $imgText = $(this).parent().find('.imgText'); // find the text
        $textbox.text($imgText.text()); // add the text to the p-tag
        $textbox.removeClass('animated fadeOut');
        $textbox.addClass('animated fadeIn');
    },
    handlerOut = function () {
        //var $imgText = $(this).parent().find('.imgText');
        $textbox.removeClass('andimated fadeIn');
        $textbox.addClass('animated fadeOut');
    };

$('img').hover(handlerIn, handlerOut);

＆＃13;

body {
    font-family: Arial, Helvetica, sans-serif;
}
ul {
    list-style-type: none;
}
li {
    display: inline-block;
    border: 1px solid black;
    height: 200px;
    overflow: hidden;
}
.imgText {
    text-align: center;
    opacity: 0.0;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <img src="http://lorempixel.com/200/200/sports/1" />
        <p class="imgText">first image text...</p>
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/sports/2" />
        <p class="imgText">second image text...</p>
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/sports/3" />
        <p class="imgText">third image text...</p>
    </li>
</ul>
<p id="textbox"></p>

＆＃13;

将鼠标悬停在不同的图像上会使不同的文本显示在同一文本框中

1 个答案: