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

【问题标题】：jQuery - Display an element on hover of anotherjQuery - 在悬停另一个元素时显示一个元素
【发布时间】：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 中是否有一个持续时间函数，允许菜单在悬停后显示特定的秒数以允许用户进入菜单？

标签： jquery css jquery-hover

【解决方案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"
    })
});

【讨论】：