Show Content On Hover

1

2

• 3

Solution 1:

This is an example for your test case, you should improve it for your live app.

JSFiddle link: click here

$(document).ready(function(){
    $("#side h2").hide();
    $("#side ul li a").mouseover(function() {
        if($(this).hasClass("3")) {
            $("#side h2.1").show();
        } elseif($(this).hasClass("4")) {
            $("#side h2.2").show();
        } 
    }).mouseout(function() {
        if($(this).hasClass("3")) {
            $("#side h2.1").hide();
        } elseif($(this).hasClass("4")) {
            $("#side h2.2").hide();
        }
    });
})

JSFiddle link: click here

Solution 2:

<style>
.1{
    display: none;
}
</style><script>document.querySelector('.3').onmouseover = function(){
    document.querySelector('.1').style.display = 'block';
};
document.querySelector('.3').onmouseout = function(){
    document.querySelector('.1').style.display = 'none';
};
</script><divid="side"><h2class="1">1</h2><h2class="2">2</h2><ul><li><aclass="3"href="">3</a></li><li><aclass="4"href="">4</a></li></ul></div>

Instead of document.querySelector('.3') you can use document.getElementsByClassName('3')[0]

Solution 3:

You are gonna use eq()

If I understood it right, you need your first item from your ul, open the first header. the second item, open the second header, etc.

eq() Get the supplied index that identifies the position of this element in the set.

Here is the Fiddle

HTML

<divid="side"><h2class="1">1</h2><h2class="2">2</h2><ul><li><aclass="3"href="#">3</a></li><li><aclass="4"href="#">4</a></li></ul></div>​

jQuery

$(document).ready(function(){
    $('#side a').on('click', function(){
        var index = $('#side a').index(this);
        // alert(index);alert($('#side h2').eq(index).html());
    });
});
​

NOTE: Difference between eq and :nth-child

---

EIDT: as you ask for hover, you can do this.

$(document).ready(function(){
    $('#side a').on('hover', function(){
        var index = $('#side a').index(this);
        // alert(index);
        // alert($('#side h2').eq(index).html());
        $('#side h2').eq(index).toggle();
    });
});

Solution 4:

<divid="side"><h2class="one">What Have You Tried?</h2><h2class="two">2</h2><ul><li><aclass="three"href="">3</a></li><li><aclass="four"href="">4</a></li></ul></div><scripttype="text/javascript"> 
    $(document).ready(function() { 
        $("#side a").hover( 
            function() { 
                $("#side").find('.one').show(); 
            }, 
            function() { 
                $("#side").find('.one').hide(); 
            } 
        ); 
    }); 
</script>

http://jsfiddle.net/VdFxf/1/

Share