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();
        } else if($(this).hasClass("4")) {
            $("#side h2.2").show();
        } 
    }).mouseout(function() {
        if($(this).hasClass("3")) {
            $("#side h2.1").hide();
        } else if($(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>
<div id="side">
    <h2 class="1">1</h2>
    <h2 class="2">2</h2>
    <ul>
        <li><a class="3" href="">3</a></li>
        <li><a class="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

<div id="side">
    <h2 class="1">1</h2>
    <h2 class="2">2</h2>
    <ul>
        <li><a class="3" href="#">3</a></li>
        <li><a class="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:

<div id="side">
    <h2 class="one">What Have You Tried?</h2>
    <h2 class="two">2</h2>
    <ul>
        <li><a class="three"href="">3</a></li>
        <li><a class="four" href="">4</a></li>
    </ul>
</div>


<script type="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