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>

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

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

尝试在悬停时在3个对齐的图像下方显示不同的文本

3 个答案: