Onmouse event not triggered

Question

Goodmorning,

ive a code that show an information box over a div with a background image and when the mouse is entering that div. The information box is higher so it is showing more text but when te mouse is leaving the div it must go smaller. but sometimes the mouse leave event is not working.

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

Use the latest jQuery Hover method to avoid difficulties. Below is the high-level code that helps you.

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

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

);

Answer 2

Kiran's suggestion should work for you. rest of them within your logic

Working jsfiddle here

No HTML Changes same as Question

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

this is the answer

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