CODEWITHSUNDEEP
jquerycss
user240993
user240993

Reputation:

displaying content in div depending on link hovered

When hovering over one of the links, the goal is to display the div specific to the link inside the browsebox.

How can this be done?

<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>

Each of the child divs for browsebox are hidden:

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

EDIT: Forgot to mention that the divs that related to the links will have have links in it so the browsebox div will need to stay in hover state.

Upvotes: 0

Views: 119

Answers (2)

SeanCannon
SeanCannon

Reputation: 77966

Here you go: 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>

Example 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();
    });
});

Upvotes: 1

Mrchief
Mrchief

Reputation: 76208

First you need someway to link up those hrefs to corresponding divs. Something like this:

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

Then this:

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

Upvotes: 0

Related Questions