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

Answer 2

我认为错误不是在mouseleave事件中定义modal。

尝试

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

如何在mouseleave上消除这种淡化效果？

2 个答案: