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

Question

如果需要显示的元素是悬停的子元素，这可以在 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();},
    );
});

Answer 1

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

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

或者你可以像这样使用 toggle() 来使用单闭包:

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