Событие Mouse Over and Mouse Out в JQuery

-1

Я хочу показать всплывающее окно для пользователя, когда они наводится на ссылку (событие mouseover), и это всплывающее окно должно исчезнуть, когда пользователь покинет ссылку с помощью мыши (событие mouseout), но проблема заключается в том, когда появляется всплывающее окно, пользователь должен поместить всплывающее окно мыши, но на самом деле окно исчезло из-за события mouseout для ссылки, поэтому окно недоступно (точный образец находится в linkedin.com для отображения настроек учетной записи , Уведомления, добавления подключений и т. Д. В строке меню. любая помощь, я бы очень признателен.Событие Mouse Over and Mouse Out в JQuery

источник

2013-09-03 Simon

Показать код: jsFiddle.net – frenchie

Вопросы просящих кода должны продемонстрировать минимальное понимание решаемой задачи. Включите попытки решения, почему они не работают и ожидаемые результаты. –

Проверить this code

КОД:

<html> 
<head> 
    <style type="text/css"> 
     #navigationbar ul{ 
     margin:0; 
     padding:0; 
     } 
     #navigationbar ul li { 
      display: inline-block; 
      height: 20px; 
      padding:10px; 
     } 
     #navigationbar ul li a { 
      padding: 10px; 
     } 
     #navigationbar ul span { 
      background:red; 
     } 

    </style> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script> 
    var intervals; 
    $('.test').mouseover(function(){ 
     $('.hov').hide(); 
     var a = $(this).attr('title'); 
     var b = $(this).parent(); 
     b.append('<span class="hov" style="top:-5px;">'+a+'</span>'); 
     intervals= setTimeout("$('.hov').hide();",2000); 
    }); 

    console.log('outside'+intervals); 
    $('#navigationbar').on('mouseover','.hov',function(){ 
     clearTimeout(intervals); 
    }); 
    $('#navigationbar').on('mouseout','.hov',function(){ 
     $('.hov').hide(); 
    }); 

    </script> 


</head> 
<body> 
<div id="navigationbar"> 
<ul> 
    <li><a class="test" href="#" title="test" >Home</a></li> 
    <li><a class="test" href="#" title="test1">About</a></li > 
    <li><a class="test" href="#" title="test2">Contact</a></li> 
<ul> 
</body> 

</html>

источник

2013-09-03 08:55:53 yantrakaar

Большое спасибо, это именно то, что я искал – Simon

, пройдите по этой ссылке. Лучше, чем выше. http://jsfiddle.net/Z7a2u/8/ – yantrakaar

как frenchie и Patsy Issa сказал вам, вы должны показать какой-то код или что вы решительно пытались! , вы также можете посмотреть на mouseenter & mouseleave ...

источник

2013-09-03 07:54:49

Событие Mouse Over and Mouse Out в JQuery

ответ

Смежные вопросы