jQuery-在另一个元素上悬停时显示一个元素 [英] jQuery - Display an element on hover of another

问题描述

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

This could be done easily in CSS if the element that needs to be displayed was a child of the hover, but it isn't; it's in a different section of the document.

我试图将鼠标悬停在'[+]'元素上来显示菜单.

I'm trying to have the menu display upon hovering over the '[ + ]' element.

实时: 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();},
    );
});

推荐答案

您可以通过仅显示您感兴趣的ID来大大简化此过程.不需要其他用作ID的选择器即可独一无二.注意，我还提供了悬停和悬停功能，因为我假设您要在悬停条件结束后隐藏元素.

You can drastically simplify this by just only showing the id's you are interested in. No need for the rest of the selectors that you are using as ID's are required to be unique. Note I also provided both hover-in and hover-out functions as I am assuming you want to hide the element after hover condition ends.

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

或者，您也可以像这样使用toggle()进行单次闭合:

Alternately you could just us single closure with toggle() like this:

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

这篇关于jQuery-在另一个元素上悬停时显示一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！