jQuery悬停/隐藏/显示 - 当鼠标悬停在多个图像上时，并非所有文本都会正确消失

jQuery hover/hide/show - not all the text will disappear correctly when mousing over multiple images

本文关键字：悬停 文本 消失 显示 隐藏 鼠标 jQuery 图像      更新时间：2023-09-26

我处于这种情况，我想在我的网站上显示默认文本，当将鼠标悬停在三个不同的图像上时，默认文本应该更改为三个不同的文本。

正如您在小提琴中看到的那样，我做到了这一点 - 但是如果我快速将鼠标移到所有三个图像上，那么并非所有文本都会正确消失。我如何实现这一点？

我的图像JavaScript代码：

$().ready(function () {
 $("#image1").hover(
 function () {
     $("#default").hide(timer,
     function () {
         $("#content1").show(timer,
         function () {})
     });
 },
 function () {
     $("#content1").hide(timer, function () {
         $("#default").show(timer,
         function () {});
     });
 });
});

附言。如果仅使用 HTML 和 CSS 就可以做到这一点 - 那也没关系。

我的杰斯菲德尔：http://jsfiddle.net/T4BCx/4/

这是因为动画命令的排队性质，在您的情况下，您需要强制 jQuery 在显示/隐藏元素之前完成所有先前排队的动画。你可以使用 .stop（） 来做到这一点。

此外，您的解决方案看起来非常完整，我也进行了一些 dom 更改以使其简单

<table>
    <tr>
        <td>
            <img src="http://placehold.it/150x150" id="image1" alt="description" width="150px" class="content-img" data-target="#content1" />
        </td>
        <td>
            <img src="http://placehold.it/150x150" id="image2" alt="description" width="150px" class="content-img" data-target="#content2" />
        </td>
        <td>
            <img src="http://placehold.it/150x150" id="image3" alt="description" width="150px" class="content-img" data-target="#content3" />
        </td>
    </tr>
    <tr>
        <td colspan="3" style="height:100px">
            <div id="default">
                 <h1>default</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div id="content1">
                 <h1>content 1</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div id="content2">
                 <h1>content 2</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div id="content3">
                 <h1>content 3</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </td>
    </tr>
</table>

然后

//initial
var timer = 200;
jQuery(function ($) {
    var inside = false;
    $("#content1, #content2, #content3").hide();
    $(".content-img").hover(function () {
        inside = true;
        var $target = $($(this).data('target'));
        $("#default").stop(true, true).hide(timer, function () {
            if (inside) {
                $target.stop(true, true).show(timer);
            }
        });
    }, function () {
        inside = false;
        $($(this).data('target')).stop(true, true).hide(timer, function () {
            if (!inside) {
                $("#default").stop(true, true).show(timer);
            }
        });
    });
});

演示：小提琴

我已经尝试过这样了

$("img").hover(function () {
    var value = $(this).attr("id").substr($(this).attr("id").length-1);
    $('div[id="default"]').find('h1').text("Content" + value);
    $('div[id="default"]').find('p').text("Content of Image" + value);
});
$("img").mouseout(function(){
$('div[id="default"]').find('h1').text("Default");
    $('div[id="default"]').find('p').text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
})

现场演示

相关文章：