试图使不同的文本出现在悬停的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

您对此有多个问题。 首先，ID只能使用一次。 将它们更改为类，就可以了。 其次，将div移到图像div内，它只会显示您想要的一个。 更新后的javascript和html如下：

小提琴： 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>

Java脚本

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

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

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

Answer 2

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

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

javascript现在会根据触发事件的图像来修改并显示文本。

   $('#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();
    });