jQuery - 在悬停另一个元素时显示一个元素

Posted 2023-05-09

【中文标题】jQuery - 在悬停另一个元素时显示一个元素

【英文标题】：jQuery - Display an element on hover of another

【发布时间】：2013-06-30 12:03:06

【问题描述】：

如果需要显示的元素是悬停的子元素，这可以在 CSS 中轻松完成，但事实并非如此；它位于文档的不同部分。

我试图在将鼠标悬停在“[+]”元素上时显示菜单。

直播：http://blnr.org/testing

Jfiddle：http://jsfiddle.net/bUqKq/5/

jQuery:

$(document).ready(function()
    $("header[role='masthead'] #container #left nav#static span").hover(
        function()$("header[role='masthead'] nav#active").show();,
    );
);

【问题讨论】：

他想知道当鼠标悬停在 [+] 上时如何显示菜单

如何在将鼠标悬停在文档不同部分的元素上时显示特定元素

我发布的jQuery代码没有做任何事情。

您的代码中存在语法错误，并且您尚未选择/加载 jQuery 库。此外，由于 ID 是唯一的，您不必编写如此长/效率低的选择器 jsfiddle.net/fRQN9

谢谢！ jQuery 中是否有一个持续时间函数，允许菜单在悬停后显示特定的秒数以允许用户进入菜单？

【参考方案1】：

您可以通过仅显示您感兴趣的 id 来大大简化此操作。不需要您使用的其余选择器，因为 ID 必须是唯一的。请注意，我还提供了悬停和悬停功能，因为我假设您想在悬停条件结束后隐藏元素。

    $(document).ready(function()
        $("#static span").hover(
            function()
                $("#active").show();
            ,
            function()
                $("#active").hide();
            
        );
    );

或者，您也可以像这样使用 toggle() 单独关闭：

    $(document).ready(function()
        $("#static span").hover(
            function()
                $("#active").toggle();
            
        );
    );

【讨论】：

比绑定 mouseover 和 mouseout 好多了。

【参考方案2】：

这是一个简单的示例，您将鼠标悬停在一个元素上，然后更改了一个完全不同的元素，

http://jsfiddle.net/bUqKq/6/

<div id="one">hover here</div>
<div id="two">hover here2</div>

 

$("#one").on("mouseover",function()
    $("#two").css(
        color:"red"
    )
);

$("#one").on("mouseout",function()
    $("#two").css(
        color:"black"
    )
);

$("#two").on("mouseover",function()
    $("#one").css(
        color:"red"
    )
);


$("#two").on("mouseout",function()
    $("#one").css(
        color:"black"
    )
);