Question

早安，

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

＆＃13;

$(".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
            });
        }
    });

});

＆＃13;

<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>

＆＃13;

Answer 1

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

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

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

);

Answer 2

Kiran的建议应该适合你。其余的都在你的逻辑中

<强> Working jsfiddle here

否 HTML 与问题

相同的更改

<强> CSS：

.span4 { border:dashed 1px gold; margin:5px;}
.triangle-up {float:left;}
.triangle-up:before { content:"+"; color:orange;}

<强> JS：

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

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

});

Answer 3

这是答案

$( ".extra-info-vak, .extra-info-text" ).hover(
   function() {
        var _this = this;   

        $(this).find('.triangle-up').stop(true).fadeOut({
            duration:200,
            complete:function(){

                $(_this).addClass("open");
                $(_this).find('.triangle-up').stop(true);

                $(_this).find('.extra-info-text').stop(true).animate({height:'150px'},{duration:800,queue:false,easing:'easeOutQuart'});

            }
        });
    }, 
    function() {
        var _this = this;
        $(_this).find('.extra-info-text').stop(true).animate({height:'60px'},{
            duration:800,
            queue:false,
            easing:'easeOutBounce', 
            complete:function(){
                $(_this).find('.extra-info-text').stop(true);
                $(_this).find('.triangle-up').stop(true).fadeIn({duration:200, queue:false});
                $(_this).removeClass("open");
            }
        });
    }
);
$(".driekolom").on('mouseleave',function(){
    var openclasses = document.getElementsByClassName("open");
        $(openclasses).find('.extra-info-text').stop(true).animate({height:'60px'},{
            duration:800,
            queue:false,
            easing:'easeOutBounce', 
            complete:function(){
                $(openclasses).find('.extra-info-text').stop(true);
                $(openclasses).find('.triangle-up').stop(true).fadeIn({duration:200, queue:false});
                $(openclasses).removeClass("open");
            }
        });
});

没有触发Onmouse事件

3 个答案: