在悬停时显示内容

问题描述

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

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>

推荐答案

这是您的测试用例的示例，您应该为在线应用程序进行改进.

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

JSFiddle链接:单击此处

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链接:单击此处

JSFiddle link: click here

这篇关于在悬停时显示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！