试图使不同的文字出现在3个对齐的图像在悬停

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

本文关键字：3个 对齐 悬停 图像 文字      更新时间：2023-09-26

首先，这是我的例子: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上，一切都按照它应该的方式工作。

你有很多问题。首先，id只能使用一次。将它们更改为类，应该就没问题了。其次，将div移动到图像div的内部，它将只显示您想要显示的内容。更新后的javascript和html如下:

小提琴:https://jsfiddle.net/y532ouzj/34/

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

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

我不直接回答这个问题，而是提出一个建议。为了避免过于复杂，我建议您使用Title属性。

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

大多数浏览器都知道该怎么做。一些较旧的浏览器可能会提供不同质量的属性解释，但这是实现您想要完成的任务的最简单方法。

相关文章：