Показать/скрыть DIV при наведении мыши

Я хочу показать аа DIV на изображение/ссылку парении и я написал следующий кодПоказать/скрыть DIV при наведении мыши

$("#NotificationSummary").hover(
     function() { 
      $("#dvNotifications").slideDown(); 
     }, 
     function() {   

      $("#dvNotifications").slideUp(); 
     } 
    );

DIV показывает на парении, но когда я перейти к Div скрывает, как может я остановить DIV из укрытия, когда мышь находится над ней

пожалуйста просмотреть демо http://jsfiddle.net/3hqrW/15/

источник

2012-06-25 Tanveer

[Пересоздать основанный на комментарии] jsfiddle пересмотрен, удалено только css-решение. Трюк состоит в том, чтобы контролировать состояние зависания элемента скольжения и использовать таймаут, чтобы позволить пользователю перемещаться по скользящему элементу (см. Также комментарии в обновленном jsfiddle).

jsfiddle, полученный из ФОС jsfiddle @here

функции парения, используя ваш #ids:

function hover(e){ 
e = e || event; 
var el = e.target || e.srcElement 
    ,showel = $('#dvNotifications') 
; 
if (!/NotificationSummary/i.test(el.id)) { 
    showel .attr('data-ishovered',/over/i.test(e.type)); 
} else { 
    showel .attr('data-ishovered',false) 
} 

if (/true/i.test(showel .attr('data-ishovered'))){return true;} 

if (/over$/i.test(e.type) && /NotificationSummary/i.test(el.id)){ 
    showel .slideDown(); 
} else { 
    setTimeout(function(){ 
     if (/false/i.test(showel .attr('data-ishovered'))) { 
      showel .slideUp(); 
      showel .attr('data-ishovered',false); 
     } 
     } 
    ,200); 
}

}

источник

2012-06-25 07:02:47 KooiInc

он не работает IE, просто мерцает. BTW Мне не нравится записывать специфику браузера – Tanveer

Да, IE (возможно, версия 10 может работать или использовать Google Chrome Frame (https://developers.google.com/chrome/chrome-frame/)). – KooiInc

@KooiInc: нижний div остается открытым навсегда, если вы никогда не укажете свой указатель на нижний div. См. В этой демонстрации: http://jsfiddle.net/rathoreahsan/3hqrW/54/ –

Tanveer любезно посмотреть демо:http://jsfiddle.net/rathoreahsan/3hqrW/

ДИВ вы хотите отобразить на парении должен быть внутри основной DIV, на котором вы хотите парить, а главное ДИВ должны иметь CSS атрибуты: display:block

Еще демо:http://jsfiddle.net/rathoreahsan/SGUbC/

источник

2012-06-25 06:10:48

Как вы знаете его HTML структуру? – Blaster

@Blaster Я не знал его структуры HTML, но я предлагаю ему эту структуру, потому что я уже предложил это в следующем сообщении: http://stackoverflow.com/questions/7146281/how-to-display-a- form-on-mouseover-and-hide-it-on-mouseout/7146486 –

@AhsanRathod хороший ответ, но я реализую такие функции, как уведомления в facebook, изображение находится в файле заголовка, а div, который будет показан, находится на странице. Я положил div на css и теперь просто хочу показать/скрыть div. Я пробую вашу технику тем временем, если у вас есть какая-то другая идея, то, пожалуйста, предложите – Tanveer

-1

$("#NotificationSummary").mouseenter(function() { 
     $("#dvNotifications").fadeIn(); 
    }).mouseleave(function() { 
     $("#dvNotifications").fadeOut(); 
    });

источник

2012-06-25 07:09:17 Ajai

Что вы хотите достичь, сделав это? –

Показать/скрыть DIV при наведении мыши

ответ

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