javascript - 在 mouseenter/mouseleave 上隐藏/显示 HTML 元素

Question

一个页面有一个<li> .当客户鼠标输入<li>区域，另一个<ul>弹出(显示购物车项目)。我不知道如何隐藏这个 <ul>当用户将鼠标移出 <ul> 时区域。

这是我试过的 jQuery 代码:

$("#cartLi")
    .mouseenter(function () {
        $.post("/ShoppingCart/cartDropDown",
            function (data) {
                $('.cart-skeleton').replaceWith(data);
                $('.cart-dropdown').css('display', 'inline-block');

            })
    });
$("#cartLi")
    .mouseleave(function () {
            $('.cart-dropdown').css('display', 'inline-block');
    })

$(".cart-dropdown")
    .mouseenter(function () {
        $('.cart-dropdown').css('display', 'inline-block');
    });

$(".cart-dropdown")
.mouseleave(function () {
        if ($('.cart-dropdown').css.display == 'inline-block') {
            $('.cart-dropdown').css('display', 'none');
        }
    });

HTML:

<li class="catalogue-specials" id="cartLi">    
    <a href="#" id="btnLastOption">
 My Cart
</a>    
</li>
<ul class="cart-dropdown">
</ul>

Answer 1

看看这个作品。 :) 检查这是否是您的要求？

$(document).ready(function(){
$('.cart-dropdown').hide();
});

$("#btnLastOption").mouseenter(function(){
    
        $('.cart-dropdown').show();
    });

$(".cart-dropdown").mouseleave(function(){
 $('.cart-dropdown').hide();
});

   

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="catalogue-specials" id="cartLi">    
    <a href="#" id="btnLastOption">
 My Cart
</a>    
</li>
<ul class="cart-dropdown">
<li>hsds</li>
<li>jshd</li>
</ul>