javascript - Onmouse 事件未触发

Question

早上好，

有一段代码，当鼠标进入该 div 时，该代码会在带有背景图像的 div 上显示一个信息框。信息框较高，因此显示更多文本，但当鼠标离开 div 时，它必须变小。但有时鼠标离开事件不起作用。

$(".extra-info-vak, .extra-info-text").on('mouseenter', function () {
    var _this = this;
    $(this).find('.triangle-up').stop(true).fadeOut({
        duration: 200,
        queue: false,
        complete: function () {
            $(_this).find('.triangle-up').stop(true);
            $(_this).find('.extra-info-text').stop(true).animate({
                height: '150px'
            }, {
                duration: 800,
                queue: false,
                easing: 'easeOutQuart'
            });
        }
    });
})
$(".extra-info-vak").on('mouseleave', function () {
    var _this = this;
    $(_this).find('.extra-info-text').animate({
        height: '60px'
    }, {
        duration: 800,
        queue: false,
        easing: 'easeOutBounce',
        complete: function () {
            $(_this).find('.extra-info-text');
            $(_this).find('.triangle-up').fadeIn({
                duration: 200,
                queue: false
            });
        }
    });

});

<section id="over">
<!-- Urenregistratie -->
<div class="row-fluid fixed over">
    <div class="span12">
        	<h1 class="gray-text">Urenregistratie</h1>
    </div>
    <div class="row">
        <div class="span4">
            <div class="extra-info-vak">
                <div class="triangle-up text-center"></div>
                <div class="extra-info-text orange">
                    <p class="text-center white-text ttl">Koptekst</p>
                    <p class="white-text">Hier komt tekst over dit onderdeel waar de muis overheen is gekomen</p>
                </div>
            </div>
        </div>
        <div class="span4">
            <div class="extra-info-vak">
                <div class="triangle-up text-center"></div>
                <div class="extra-info-text orange">
                    <p class="text-center white-text ttl">Koptekst</p>
                    <p class="white-text">Hier komt tekst over dit onderdeel waar de muis overheen is gekomen</p>
                </div>
            </div>
        </div>
        <div class="span4">
            <div class="extra-info-vak">
                <div class="triangle-up text-center"></div>
                <div class="extra-info-text orange">
                    <p class="text-center white-text ttl">Koptekst</p>
                    <p class="white-text">Hier komt tekst over dit onderdeel waar de muis overheen is gekomen</p>
                </div>
            </div>
        </div>
    </div>
</div>
</section>

Answer 1

使用最新的 jQuery Hover 方法来避免困难。下面是可以帮助您的高级代码。

$( ".extra-info-vak, .extra-info-text" ).hover(

   function() {
      // Mouseover Actions
   }, 
   function() {
     // Mouseout Actions
   }

);