javascript - 我如何在 mouseleave 上淡出这个淡入淡出？

Question

我希望能够淡出刚刚淡入的 div，但我无法让它工作。我有以下代码:

    $(document).ready(function() {
        $('.upgrade').mouseenter(function() {
            var modal = $(this).data('modal');
            // alert(modal);
            $('.' + modal).fadeIn(200);
        }).mouseleave(function() {
            $('.' + modal).stop().fadeOut(200);
        });
    });

    <div class="upgrade" id="upgrade-1" data-modal="bonus">
       <!-- text -->
    </div>

   <div class="bonus">
      <!-- bonus product text -->
   </div>

Answer 1

您需要在 mouseenter 函数之外声明模态

$(document).ready(function() {
     var modal="";//declare here
    $('.upgrade').mouseenter(function() {
         modal = $(this).data('modal');
        $('.' + modal).fadeIn(200);
    }).mouseleave(function() {
        $('.' + modal).stop().fadeOut(200);
    });
});

DEMO