Question

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

我正在尝试将鼠标悬停在'[+]'元素上时显示菜单。

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

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

2 个答案: