javascript - 悬停时显示内容

Question

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

当我将鼠标悬停在 <a> 上时，代码会是怎样的？它将显示 <h2> ？所以.3会显示 .1 ？

这是我到目前为止尝试过的:

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

Answer 1

这是您的测试用例的示例，您应该为您的实际应用改进它。

JSFiddle 链接: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 链接:click here