javascript - 垂直メニューのナビゲーションでのjqueryアコーディオンのマウスオーバーとマウスアウト

Question

以下は私のコードです。リンクCMTにマウスを合わせるとdivが開き、マウスアウトするとdivが閉じます。.....

<div class="wrap">

        <ul class="accordion1">
            <li>
                <h2 id="first">CMT</h2>
                <div class="content">
                    contents of 1st
                </div>
            </li>
            <li>
                <h2>FOIS</h2>
                <div class="content">
                    contents of 2nd
                </div>
            </li>
            <li>
                <h2>ASP</h2>
                <div class="content">
                    contents of 3rd
                </div>
            </li>
            <li>
                <h2>PTT</h2>
                <div class="content">
                    contents of 4th
                </div>
            </li>
        </ul>
    </div>

Answer 1

これを試して

$('h2').on('mouseenter', function () {
    $(this).next().show();
}).on('mouseleave', function () {
    $(this).next().hide();
});

デモ

その上にカーソルを置いたときにコンテンツを表示したい場合は、これを行うことができます

$('li').on('mouseenter', function () {
    $(this).find('.content').show();
}).on('mouseleave', function () {
    $(this).find('.content').hide();
});

デモ