jquery - 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 必须是唯一的。注意我还提供了悬停和悬停功能，因为我假设您想在悬停条件结束后隐藏元素。

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

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

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

Answer 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"
    })
});