всплывающее окно исчезнет, ​​когда onmouseout

Question

У меня этот скрипт:

$(document).ready(function(){ 
      $('.infoLink').hover(function(){ 
      $('.shoutBox').hide(); 
      $(".shoutBox"+$(this).attr("id")+"").toggle();       
      }); 

      $('.closeLink').click(function(){ 
      $(this).closest(".shoutBox").toggle();     
      }); 
     }); 

мне нужно добавить немного, так что всплывающее исчезнут, когда посетители перестанут парит над тэ всплывающей ссылки.

Всплывающее ссылка немного "я" кнопка:

<a href="javascript:void(0);" class="infoLink rollover" id="box1"><img width="12" height="11" border="0" src="../path/to/randomimage.png" alt="" title="" /></a> 

Я пытался добавить:

$('.infolink').onMouseOut(function(close){ 
$('.shoutBox').close(); 
$(".shoutBox"+$(this).attr("id")+"").toggle();        
}); 

что-то в этом роде ... Но, как вы понимаете ... это не работает ...

Кто-нибудь может мне помочь?

Answer 1

обработчик события парения() должен иметь две функции в качестве аргумента. То есть

$(".some-class").hover(function1(), function2()); 

Ответы других утвердились. Но если вы обнаружите, что синтаксис запутан, вы можете попробовать

function mouseIn(){ 
    $('.shoutBox').hide(); 
    $(".shoutBox" + this.id).show();       
} 

function mouseOut(){ 
    $(".shoutBox" + this.id).hide();       
} 

Теперь вы можете вызвать обработчик события hover.

$(".some-class").hover(mouseIn(), mouseOut()); 

Answer 2

Обработчик события .hover() принимает методы обратного вызова, первый - это вызов по мыши, а второй - по выходу мыши. если второй обратный вызов не указан, первый метод также вызывается при отклонении мыши.

Проблемы с обратным вызовом, вы скрываете все .shoutBox перед вызовом .toggle(), который будет вызывать обработчик MouseLeave, чтобы скрыть текущий элемент первым и так как тумблер вызываются после того, что он получит снова появится

вам нужно

$('.infoLink').hover(function(){ 
    $('.shoutBox').hide(); 
    $(".shoutBox" + this.id).show();       
}, function(){ 
    $(".shoutBox" + this.id).hide();       
}); 

Answer 3

$('.infoLink').hover(function(){ 
      $('.shoutBox').hide(); 
      $(".shoutBox"+$(this).attr("id")+"").toggle();       
      }, function() { 
       $('.shoutBox').close(); 
       $(".shoutBox"+$(this).attr("id")+"").toggle();    
     });