0

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

2 回答 2

2

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

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

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

    $(document).ready(function(){
        $("#static span").hover(
            function(){
                $("#active").toggle();
            }
        );
    });
于 2013-07-02T23:12:14.673 回答
1

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

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"
    })
});
于 2013-07-02T23:03:09.230 回答