Question

将鼠标悬停在其中一个链接上时，目标是显示特定于浏览器内链接的div。

如何做到这一点？

<div> 
<ul class="menu">
<li><a href="#">ARTISTS</a></li>
<li><a href="#">GENRES</a></li>
<li><a href="#">COLLECTIONS</a></li>
</ul>
<div id="browsebox">
<div class="artist"></div>
<div class="genre"></div>
<div class="collection"></div>
</div>
</div>

隐藏了浏览器的每个子div：

    $(document).ready(function(){
    $("#secondary-links li").mouseover(function(){
        $("#browsebox").slideDown(500, function(){
            $(this).addClass("shown");
            $(this).mouseleave( function() {
                $(this).fadeOut(200);
            });
        });
    });
});

编辑：忘记提及与链接相关的div将包含链接，因此浏览器div将需要保持悬停状态。

Answer 1

在这里：http://jsfiddle.net/AlienWebguy/3WjF7/4/

HTML：

<div> 
    <ul class="menu">
        <li><a rel="artist" href="#">ARTISTS</a><div class="artist">Artist info here </div></li>
        <li><a rel="genre" href="#">GENRES</a><div class="genre">Genre info here</div></li>
        <li><a rel="collection" href="#">COLLECTIONS</a><div class="collection">Collection info here</div></li>
    </ul>
</div>

示例CSS：

li>a{
    display:block;
    width:100px;
}
li>div {
    height:200px;
    width:200px;
    background-color:#CCC;
    display:none;
}

JQuery的：

$(function(){
    $('.menu li').mouseenter(function(){
        $(this).children('div').slideDown();
    });

    $('.menu li').mouseleave(function(){
        $(this).children('div').slideUp();
    });
});

Answer 2

首先，您需要将这些href链接到相应的div。像这样：

<a href="#" data-div="artist">ARTISTS</a>
<a href="#" data-div="genre">GENRES</a>
<a href="#"  data-div="collection">COLLECTIONS</a>

然后这个：

$("ul.menu a").mousein(function() {
   $($(this).data("div")).show();
}).mouseout(function() {
   $($(this).data("div")).hide();
});

根据链接悬停显示div中的内容

2 个答案: