Onmouse событие не произошло

Question

Goodmorning,

ив кода, которые показывают информационное окно над 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"> 
 
     \t <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 
    } 

); 

Answer 2

Предложение Кирана должно работать на вас. остальные в вашей логике

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