如何将鼠标悬停在一个列表的元素上并显示另一列表的元素？

Question

I have this HTML

<ul class="nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>

<ul class="output">
<li>Content and output here 1</li>
<li>Content and output here 2</li>
<li>Content and output here 3</li>
</ul>

and this Javascript

 $(function(){

        $(".nav li").hover(function(){

            $(this).addClass("hover");
            $('.output li').css('visibility', 'visible');

        }, function(){

            $(this).removeClass("hover");
            $('.output li').css('visibility', 'hidden');

        });

    });

I'm trying to make it work where hovering over Link 1 shows output 1 and hovering over Link 2 shows output 2, etc. But right now it doesn't matter which nav link I hover over, output 1 always shows. Also, I can't change the markup because I don't have access to the template, I can only change CSS/JS. I think I'm missing something simple in my script so that Link 1 matches with Output 1, Link 2 with Output 2, etc. but I can't figure it out. Sort of new to scripting. Thanks.

Also do I need to do anything to make sure that each Link and corresponding Output line up with each other? (Output underneath the link on hover) I'm trying to make it like a drop down menu.

Answer 1

It is because $('.output li').css('visibility', 'visible') will select all the li elements inside .output and make them visible. You have to basically make only the corresponding li visible and hide all others. Check the code i have fixed it and also added the comments for your understanding.

$(function(){
    $(".nav li").hover(function(){
        $(this).addClass("hover");
        $('.output li')
        .css('visibility', 'hidden')//Hide all the li's
        .eq($(this).index())//Get the li at same index which triggered hover
        .css('visibility', 'visible');//Make it visible
    }, function(){
        $(this).removeClass("hover");
        $('.output li').css('visibility', 'hidden');
    });

});

.index() method returns an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

.eq(index) reduces the set of matched elements to the one at the specified index.

Working Demo

Answer 2

If you can't change the markup at all you'll need to make use of the .index() method to find out the index of the hovered element and then relate that to the index of the element you want to show.

Note that if you're trying to make a drop-down menu effect you don't want to hide the output part when you move the mouse away from the main menu item or you won't ever be able to click on the sub menu.

With that in mind this is virtually the same requirement as that in a question I answered a few days ago . Here is a version of the code I posted for that question, which keeps the sub-menu in view for a moment after you stop hovering over the main menu, so that you have time to move the mouse over the sub-menu before it disappears:

var timerId,
    $mainMenuItems = $(".nav li"),
    $subMenus = $(".output li");

$mainMenuItems.hover(
    function(){
        clearTimeout(timerId);
        $subMenus.hide();
        $($subMenus[$mainMenuItems.index(this)]).hide()
                                                .removeClass('hidden')
                                                .show();
    }, function(){
        var i = $mainMenuItems.index(this);
        timerId = setTimeout(function(){$($subMenus[i]).hide();},500);
    }
);
$subMenus.hover(
    function() {
       clearTimeout(timerId);
    },
    function() {
       $(this).hide();
    }
);

Working demo: http://jsfiddle.net/4mgXh/

Rather than explicitly setting the visibility property I'm just using .hide() and .show() .

(I realise this goes beyond what you asked, but I figure it will solve your next problem and also I can't be bothered pulling the timeout stuff out of the code. For a more detailed explanation of how the code works look at my other answer )

Answer 3

One problem I've noticed with the other approaches is that they result in the output li being displayed as they appear within the list. I find it unlikely that this would be the desired behavior of the code.

So to get the hover working, you would style ".output li":

.output li {display:none;}

And script using show() and hide() instead of changing the visibility style:

$(function(){
    $('.nav li').hover(function(){
        $(this).addClass('hover');
        var linkId = $(this).index();
        $($('.output li')[linkId]).show();
    }, function () {
        $(this).removeClass('hover');
        var linkId = $(this).index();
        $($('.output li')[linkId]).hide();
    });
});