javascript - Show content on hover - Stack Overflow

admin管理员组

文章数量:1435859

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

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

• javascript
• jquery
• html

Share Improve this question Follow edited May 10, 2012 at 20:28 James Johnson 46.1k88 gold badges7474 silver badges111111 bronze badges asked May 10, 2012 at 20:26 Web OwlWeb Owl 56933 gold badges1616 silver badges2929 bronze badges 4

• <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#side a").hover( function() { $(this).children('.h2').show(); }, function() { $(this).children('h2').hide(); } ); }); </script> – Web Owl Commented May 10, 2012 at 20:29
• I don't know js too well – Web Owl Commented May 10, 2012 at 20:29
• Why should it display 1 and not 2? – gdoron Commented May 10, 2012 at 20:33
• @gdoron I believe he is trying to build a menu-type architecture. – Michel Ayres Commented May 10, 2012 at 21:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

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

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

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

本文标签： javascriptShow content on hoverStack Overflow