Блог

Главная - Вопросы по программированию - Скрыть div, если изображение не наведено

Скрыть div, если изображение не наведено

#jquery #image #html #hover #hide

#jquery #изображение #HTML #наведите #скрыть

Вопрос:

Хорошо, я прочитал множество подобных вопросов, но не нашел ответа на свой конкретный вопрос. На моем сайте у меня есть список изображений, которые увеличиваются при наведении, и рядом с этим изображением появляется div, показывающий, какой это тип изображения. При наведении курсора мыши div исчезает, и изображение возвращается к своему предыдущему состоянию. Все работает нормально, если я медленно навожу курсор на изображения одно за другим, но когда я навожу курсор на несколько изображений довольно быстро, все элементы управления появляются и остаются видимыми, даже если изображение больше не наведено. Итак, мой вопрос заключается в следующем: как мне настроить его так, чтобы даже при быстром наведении курсора на изображения дивы исчезали?

 $("ul.graphThumbs li").hover(function() {
    $(this).find(".graphInfo").css({"z-index":"9999"}).hide().delay(300).fadeIn(700);
},function(){
    $(".graphInfo").hide();
});

Тогда мне нужно что-то вроде if ("ul.graphThumbs li") не зависает (".graphInfo").hide() . так что (".graphInfo") это может быть показано только в том случае, если некоторые из ("ul.graphThumbs li") них наведены.
Надеюсь, я был достаточно ясен.

Комментарии:

1. Я бы рекомендовал не быть таким расплывчатым в вашем селекторе скрытия. Убедитесь, что вы используете то же find() самое при скрытии, что и при показе.

Ответ №1:

используйте css

 div.about{display:none;}
img:hover   div.about{display:block;}

в качестве краткого примера
http://jsfiddle.net/lastrose/ssHRd /

если вы хотите придерживаться jquery, .stop() и очистите очередь перед запуском другой анимации.

 $("ul.graphThumbs li").stop(true)

Ответ №2:

 $("ul.graphThumbs li").hover(function() {
    $('.graphInfo').stop(true);  
    $(this).find(".graphInfo").css({"z-index":"9999"}).hide().delay(300).fadeIn(700);
},function(){
    $(".graphInfo").hide();
});
Метки: