CODEWITHSUNDEEP
javascriptjqueryhtml
Web Owl
Web Owl

Reputation: 569

Show content on hover

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

What would the code be so when I hover over an <a> it will display the <h2>? So .3 would display .1?

This is what I've tried so far:

<script type="text/javascript"> 
    $(document).ready(function() { 
        $("#side a").hover( 
            function() { 
                $(this).children('.h2').show(); 
            }, 
            function() { 
                $(this).children('h2').hide(); 
            } 
        ); 
    }); 
</script>

Upvotes: 2

Views: 4876

Answers (4)

Ram
Ram

Reputation: 144729

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

Upvotes: 1

Michel Ayres
Michel Ayres

Reputation: 5985

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

Upvotes: 1

pXel
pXel

Reputation: 599

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

Upvotes: 2

Danilo Valente
Danilo Valente

Reputation: 11352

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

Upvotes: 2

Related Questions