Question

我有一个包含图像和文字的列表项。文字正在翻阅图像。当我将鼠标悬停在文本上方时。然后文字消失，你可以看到图片。

我有这个HTML：

 <ul>
                    <li><img src="content/img/voorbeeld/projecten.jpg" alt="Project foto" width="209" height="207" />
                        <div class="text">
                            <h4>Nieuwbouw Aalanden Zwolle</h4>
                            <p>Vestibulum eget tristique ante. In hac habitasse platea dictumst.</p>
                            <a href="projecten.html" title="Project details">Project details</a>
                        </div>
                    </li>
                    <li><img src="content/img/voorbeeld/projecten.jpg" alt="Project foto" width="209" height="207" />
                        <div class="text">
                            <h4>Nieuwbouw Woonwijk in Amsterdam</h4>
                            <p>Vestibulum eget tristique ante. In hac wegweg wegweg weg tumst In hac habita abitasse platea dictumstIn hac habitasse platea dictumst.</p>
                            <a href="projecten.html" title="Project details">Project details</a>
                        </div>
                    </li>
                </ul>

这个javascript

var div     = $(".projects li"); 

    $("#footer .projects li",this).hover(function()
    {       
        if(div.hasClass("open"))
        {
            $(".projects .text").show();
            div.removeClass("open");
        }
        else
        {
            $(".text").hide();
            div.addClass("open");
        }
    });

但是当我现在盘旋一件礼物时。两件物品的所有文字都消失了。我怎么能做到当我将鼠标悬停在一个项目上时，另一个不会消失？

Answer 1

你没有提供this来自哪里的代码，但你正在使用的代码应该更多地沿着这些方向：

//               "this" context is unknown from your code
$(".projects li", this).hover(function()
{
    // save jQuery "this" for faster reuse 
    var $this = $(this);
    if($this.hasClass("open"))
    {
        $(".text", this).show();
        $this.removeClass("open");
    }
    else
    {
        $(".text", this).hide();
        $this.addClass("open");
    }
});

Answer 2

您的标记为您提供了线索 - 您需要在悬停回调中使用此标记，以确保您只处理要使用的列表项，而不是两者。现在您正在使用变量div，它设置为$('.projects li')，这意味着一个jQuery对象代表项目下的两个列表项。而是在回调中使用this。在回调中，this被设置为正在悬停的元素。

$("#footer .projects li", this).hover(function() {
    if ($(this).hasClass("open")) {
        $(this).children(".text").show(); // note - not all .text divs, but only
                                          // children of this list item
        $(this).removeClass("open");
    }
    else {
        $(this).children(".text").hide(); // note - not all .text divs, but only
                                          // children of this list item
        $(this).addClass("open");
    }
});

See it in action（没有图片，但您可以看到显示和隐藏文字）。

Answer 3

\\ var div = $（“。projects li”）; - 可以删除不需要的

$("#footer .projects li").hover(function() \\this will suffice
{       
    var thisLi = $(this); \\get this for the item that has been hovered
    if(thisLi.hasClass("open"))
    {
        thisLi.find(".text").show();
        thisLi.removeClass("open");
    }
    else
    {
        thisLi.find(".text").hide();
        thisLi.addClass("open");
    }
});

小javascript这个问题

3 个答案: