jquery - 只有其他的 li 受到简单的 mouseover mouseout 模态窗口代码的影响

Question

我正在尝试编写简单的代码，当它们相应的“信息 div”悬停时，允许特定的 div 淡入和淡出。我有八个列表项和八个相应的“信息 div”。当第一个 li 悬停在上面时，相应的“info div”应该淡入，并且确实如此。但是当我将鼠标悬停在第二个 li 上时，第三个“信息 div”会淡入。第三个 li 会影响第五个，依此类推。我已经包含了 jQuery 代码。任何帮助，将不胜感激。谢谢。

    $(document).ready(function(){
        $('.case-info').hide();
        $('#text323-b li').mouseover(function(){
            var x = $(this).index();
            $('.case-info').eq(x).fadeIn();
        });
        $('#text323-b li').mouseout(function(){
            var x = $(this).index();
            $('.case-info').eq(x).fadeOut(function(){
                $(this).hide();
            });
        });
    });

Answer 1

我将在黑暗中尝试一下，并假设您的 LI 列表中有其他标记，例如一些<br />ro 一些这样的，这可以解决：

$('.case-info').hide();
$('#text323-b li').mouseover(function () {
    var x = $(this).index('#text323-b li');
    $('.case-info').eq(x).fadeIn();
}).mouseout(function () {
    var x = $(this).index('#text323-b li');
    $('.case-info').eq(x).fadeOut(function () {
        $(this).hide();
    });
});