试图在悬停时使不同的文本出现在 3 个对齐的图像下方

Question

首先，这是我的例子： https://jsfiddle.net/y532ouzj/33/

HTML:

    <div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div> 
<div id="text" class="show">Text 1</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div> 
<div id="text" class="show">Text 2</div>
    <div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div> 
<div id="text" class="show">Text 3</div>

CSS:

        .item {
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 190px;
}
.show {
    display: none; 
}

    .item:hover + .show {
    display: block;
}

JAVASCRIPT :

    $('#image').hover(function() {
        $('#text').show();
    }, function() {
        $('#text').hide();
});

它几乎可以工作，但我一定是忘记了一些东西，因为一旦我开始悬停鼠标，我的 3 张图片就没有停留在我想要的位置。因此，如果您不将鼠标悬停在图片上，一切都很好，3 张图片对齐。将鼠标悬停在图片 #1 或图片 2 上，文字正好位于我想要的位置，但为什么我的图片 3 和图片 2 也向下移动了？将鼠标悬停在图片 #3 上，一切正常。

Answer 1

您对此有多个问题。首先，ids只能使用一次。将它们更改为类，你应该没问题。其次，将图像 div 内的 div 移动到它会只显示您想要的那个。 javascript 和 html 更新如下：

fiddle: https://jsfiddle.net/y532ouzj/34/

HTML

<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div  class="text show">Text 1</div>
</div>

<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div  class="text show">Text 2</div>
</div>

<div  class=" image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div  class="text show">Text 3</div>
</div>

Javascript

$('.image').hover(function () {
    var that = $(this);

    that.find('.text').show();
}, function () {
        var that = $(this);

    that.find('.text').hide();
});

Answer 2

我将提出建议而不是直接回答问题。我建议您使用 Title 属性，而不是使它过于复杂。

<div class="image"><a><img src="" title="Text 1" /></a></div>

大多数浏览器都知道如何处理它。一些较旧的浏览器可能会提供不同质量的属性解释，但这是完成您要完成的任务的最简单方法。

Answer 3

首先，java 和 javascript 不是一回事；它们是两种不同的语言。

其次，在 HTML 中，为页面上的多个元素使用相同的 ID 是错误的形式（并且可能是完全错误的）。每个 id 属性的值应该是唯一的。

最后，HTML和jQuery中的答案：

https://jsfiddle.net/y532ouzj/36/

HTML 现在只包含一个文本。将针对每个案例进行修改

   <div id="image_1" class="item">
    <a >
        <img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />        </a>
</div>
<div id="image_2" class="item">
    <a >
        <img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
    </a>
</div> 
<div id="image_3" class="item">
    <a >
        <img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
    </a>
</div> 
<div id="text" class="show">
    Text
</div>

java脚本现在根据触发事件的图像修改和显示文本。

   $('#image_1').hover(function() {
        $('#text').html("Text 1");
            $('#text').show();
        }, function() {
            $('#text').hide();
    });
    $('#image_2').hover(function() {
        $('#text').html("Text 2");
            $('#text').show();
        }, function() {
            $('#text').hide();
    });
    $('#image_3').hover(function() {
        $('#text').html("Text 3");
            $('#text').show();
        }, function() {
            $('#text').hide();
    });

试图在悬停时使不同的文本出现在 3 个对齐的图像下方

Trying to make different text appear below 3 aligned images on hover

html

javascript

css

jquery

hover