CODEWITHSUNDEEP
jquerycsshoverjquery-hover
Mariola
Mariola

Reputation: 167

Hover LI to show div

I asked similiar question on here, and eventough i got some answers, i didnt managed to make it work. In short, i have a UL list like this:

<ul class="productlist">
      <li><a href="#" id="link0" class="product-link">Caviar</a></li>
      <li><a href="#" id="link1" class="product-link">Athena</a></li>
      <li><a href="#" id="link2" class="product-link">Knot</a></li>
      <li><a href="#" id="link3" class="product-link">Brooke Leaf</a></li>
</ul>

Bellow that, i have 4 DIV's. All of them except the first one should be hidden, and only opened when the user hovers over their LI link above. So, in short.User comes to the page, first link is opened.He hovers over second, and second one appears, same thing with third, fourth...

<div id="boxlink0">Some text for the first link</div>
<div id="boxlink1">Some text for the second link</div>
<div id="boxlink2">Some text for the third link</div>
<div id="boxlink3">Some text for the fourth link</div>

Upvotes: 2

Views: 8074

Answers (6)

dfsq
dfsq

Reputation: 193261

Try this simple script:

var $boxes = $('.boxlink');
$('.productlist .product-link').mouseover(function() {
    $boxes.hide().filter('#box' + this.id).show();
});

I added helper class boxlink to all divs for convenience. You also need a little CSS to show the first div by default:

.boxlink {
    display: none;
}
#boxlink0 {
    display: block;
}

Demo: http://jsfiddle.net/Vg4SH/

Upvotes: 2

Gunjan
Gunjan

Reputation: 1244

See working Fiddle Here

First apply css display none to last 3 divs:

#boxlink1, #boxlink2, #boxlink3 {
    display:none
}

then write this js code:

$('#link0').hover(function(){
    $('#boxlink0').css('display','block');
    $('#boxlink1, #boxlink2, #boxlink3').css('display','none');
});

$('#link1').hover(function(){
    $('#boxlink1').css('display','block');
    $('#boxlink0, #boxlink2, #boxlink3').css('display','none');
});

$('#link2').hover(function(){
    $('#boxlink2').css('display','block');
    $('#boxlink0, #boxlink1, #boxlink3').css('display','none');
});

$('#link3').hover(function(){
    $('#boxlink3').css('display','block');
    $('#boxlink0, #boxlink1, #boxlink2').css('display','none');
});

Upvotes: 0

Oriol
Oriol

Reputation: 288100

You can't use hover to affect elements which aren't descendants or siblings of the hovered element.

But you could change your html to

<dl class="productlist">
    <dt><a href="#" id="link0" class="product-link">Caviar</a></dt>
    <dd id="boxlink0">Some text for the first link</dd>
    <dt><a href="#" id="link1" class="product-link">Athena</a></dt>
    <dd id="boxlink1">Some text for the second link</dd>
    <dt><a href="#" id="link2" class="product-link">Knot</a></dt>
    <dd id="boxlink2">Some text for the third link</dd>
    <dt><a href="#" id="link3" class="product-link">Brooke Leaf</a></dt>
    <dd id="boxlink3">Some text for the fourth link</dd>
</dl>

and use

.productlist dd {
    display: none;
}
.productlist > dt:hover + dd {
    display: block;
}

Demo

And if you want descriptions to appear below all definitions, you could use position: absolute to place them at the bottom: Demo

Upvotes: 1

Ankur Aggarwal
Ankur Aggarwal

Reputation: 3101

Wrap all divs into a wrapper div and initally apply css for making only first div visible

<div id="wrapper">
  <div id="boxlink0">Some text for the first link</div>
  <div id="boxlink1">Some text for the second link</div>
  <div id="boxlink2">Some text for the third link</div>
  <div id="boxlink3">Some text for the fourth link</div>
<div>

CSS

#wrapper div
{
    display:none;
}
#wrapper div:first-child
{
    display:block;
}

Then check which li has been hovered on using index() property and then show the corresponding div using jquery

$('ul li a').hover(function(e){
    var liNumber=$(this).parent('li').index();
    $('#wrapper div').css('display','none');
    $('#wrapper div:nth-child('+(liNumber+1)+')').show();
})

JSFiddle: http://jsfiddle.net/huF8Z/

Upvotes: 0

Tim Withers
Tim Withers

Reputation: 12059

Something like this should get the job done. Usually I reply to see what you have attempted first, but this was easy enough.

$(document).ready(function(){
    $(".productList li").hover(function(){
        $("#box"+$(this).attr("id")).show();
    },function(){
        $("#box"+$(this).attr("id")).hide();
    });
    $("#boxlink0").show();
    $("#boxlink1, #boxlink2, #boxlink3").hide();
});

Upvotes: 0

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

$(".productlist li a").hover(function(e){
    e.stopPropogation(); // to stop bubbling
    $("#box" +$(this).attr(id)).show();
})

Upvotes: 0

Related Questions