Jquery hover関数の表示と非表示

Question

人がホバーするまで、サブメニューを表示および非表示にするホバー機能があります。

問題は、マウスがメニューに移動しようとすると、もう一度表示されなくなるということです。

ここで間違っていることを誰でも指摘できますか？

$(document).ready(function() { 
 
    $('.menu-Link > a').hover(function() { 
 
    $(this).next('.menu').show(); 
 
    }, function() { 
 
    $(this).next('.menu').hide(); 
 
    }); 
 
});

nav { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    /*background-color: #333333;*/ 
 
    background-color: transparent; 
 
    transition: 0.2s; 
 
} 
 
nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: transparent; 
 
    display: inline-block; 
 
} 
 
nav ul li { 
 
    float: left; 
 
} 
 
nav ul li a.link { 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 24px 16px; 
 
    text-decoration: none; 
 
    transition: 0.2s; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    position: relative; 
 
} 
 
nav ul li div.arrow-down { 
 
    float: right; 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: 5px; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-top: 5px solid #fff; 
 
    margin-top: 10px; 
 
    transition: 0.2s; 
 
} 
 
nav ul li div.menu { 
 
    display: none; 
 
    z-index: 999; 
 
    position: relative; 
 
    background-color: #fff; 
 
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); 
 
    padding: 15px 0; 
 
    margin-top: -15px; 
 
} 
 
nav ul li div.menu a { 
 
    color: #333333; 
 
    padding-left: 15px; 
 
} 
 
nav ul li a.link:hover { 
 
    color: #808080; 
 
    text-decoration: none; 
 
    transition: 0.2s; 
 
} 
 
nav ul li a.link:hover div.arrow-down { 
 
    border-top: 5px solid #808080; 
 
    transition: 0.2s; 
 
} 
 
nav ul li:first-child { 
 
    padding-left: 100px; 
 
} 
 
nav ul.right { 
 
    float: right; 
 
} 
 
nav ul.right li:last-child { 
 
    padding-right: 100px; 
 
} 
 
nav.color { 
 
    background-color: #333333; 
 
    transition: 0.2s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul class="left"> 
 
    <li class="menu-Link"> 
 
     <a href="" class="link">Home</a> 
 
     <div class="menu"> 
 
     <a href="">subcat.Title</a> 
 
     </div> 
 
    </li> 
 
    <li class="menu-Link"> 
 
     <a href="" class="link">Test</a> 
 
     <div class="menu"> 
 
     <a href="">subcat.Title</a> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
    <ul class="right"> 
 
    <li><a href="/">Basket</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

ユーザーがホバーのmouseout一部がそのaとで呼び出されて表示されるメニューの上にマウスをしようとしたときにイベントがゆえ、a要素に添付されているため、問題がありますJSコードはメニューを再び非表示にしようとします。これを修正するには、aとメニューの両方を保持する要素にhover()イベントを添付します。この場合、要素自体は.menu-linkです。また、変更のためにnext()からfind()に変更する必要があります。単にhover()ハンドラを削除して、あなたのCSSに以下の行を追加し、あなたが任意のJSコードを必要とせずに一人でCSSでこれを達成できることに注意してください。また

$(document).ready(function() { 
 
    $('.menu-Link').hover(function() { 
 
    $(this).find('.menu').show(); 
 
    }, function() { 
 
    $(this).find('.menu').hide(); 
 
    }); 
 
});

nav { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    /*background-color: #333333;*/ 
 
    background-color: transparent; 
 
    transition: 0.2s; 
 
} 
 
nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: transparent; 
 
    display: inline-block; 
 
} 
 
nav ul li { 
 
    float: left; 
 
} 
 
nav ul li a.link { 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 24px 16px; 
 
    text-decoration: none; 
 
    transition: 0.2s; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    position: relative; 
 
} 
 
nav ul li div.arrow-down { 
 
    float: right; 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: 5px; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-top: 5px solid #fff; 
 
    margin-top: 10px; 
 
    transition: 0.2s; 
 
} 
 
nav ul li div.menu { 
 
    display: none; 
 
    z-index: 999; 
 
    position: relative; 
 
    background-color: #fff; 
 
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); 
 
    padding: 15px 0; 
 
    margin-top: -15px; 
 
} 
 
nav ul li div.menu a { 
 
    color: #333333; 
 
    padding-left: 15px; 
 
} 
 
nav ul li a.link:hover { 
 
    color: #808080; 
 
    text-decoration: none; 
 
    transition: 0.2s; 
 
} 
 
nav ul li a.link:hover div.arrow-down { 
 
    border-top: 5px solid #808080; 
 
    transition: 0.2s; 
 
} 
 
nav ul li:first-child { 
 
    padding-left: 100px; 
 
} 
 
nav ul.right { 
 
    float: right; 
 
} 
 
nav ul.right li:last-child { 
 
    padding-right: 100px; 
 
} 
 
nav.color { 
 
    background-color: #333333; 
 
    transition: 0.2s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul class="left"> 
 
    <li class="menu-Link"> 
 
     <a href="" class="link">Home</a> 
 
     <div class="menu"> 
 
     <a href="">subcat.Title</a> 
 
     </div> 
 
    </li> 
 
    <li class="menu-Link"> 
 
     <a href="" class="link">Test</a> 
 
     <div class="menu"> 
 
     <a href="">subcat.Title</a> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
    <ul class="right"> 
 
    <li><a href="/">Basket</a> 
 
    </li> 
 
    </ul> 
 
</nav>

：

これを試してみてください

nav ul li:hover div.menu { 
    display: block; 
}