глюк с mouseover

__PION__ · Регистрация: 21.07.2010

Студворк — интернет-сервис помощи студентам

Привет.
Имеются пункты меню, которые при наведении раскрываются (display:block) и исчезают (display:none), вроде все работает, но если быстро провести мышкой через пункт меню, то раскрытый блок не схлопывается.
Из-за чего это может быть?
p.s. как обновить страницу на jQuery, что-то наподобие

JavaScript
1
document.location.replace()

в JS?

@Nigepas · 10.04.2012, 11:53

Странное решение - борьба с глюком через перезагрузку )), если я это вообще правильно понял.

Можно код посмотреть? Это решаемые проблемы.

__PION__ · 10.04.2012, 13:11 **[ТС]**

Сообщение от Nigepas

Странное решение - борьба с глюком через перезагрузку ))

вы не правильно поняли

Это второй вопрос, просто не хотел тему создавать из-за коротенького вопроса. надо было отметить OFF'ом.
А код простой

JavaScript
1
2
3
$('#hh').mouseover(function() {
    $('#submenu').css({'display':'block'});
});

При этом этот блок закрывает пункт меню на которую навели мышь, и поэтому блок должен закрыться при отведении мыши уже с submenu

JavaScript
1
2
3
$('#submenu').mouseout(function() {
    $('#submenu').css({'display':'none'});
});

@Nigepas · 10.04.2012, 13:18

Можно еще кусок html с самим меню? Там через ul и li сделано с вложенностью ? Или как?
Иерархия тоже важна.

Жаль, что не видно визуально, кто там кого перекрывает. Было б легче ответить...

__PION__ · 10.04.2012, 13:33 **[ТС]**

а.. щас под рукой нет, по памяти..
сама менюшка, как ты сказал, обрамлена тегами <ul><li>, и внутри li есть ссылка - <a>
Вот при наведении на ссылку открывается <div> с подменюшкой, с прозрачным фоном, и в этом div'e еще 2 div'a, один заменяющий саму ссылку, а второй со списком подразделов

HTML5
1
2
3
4
5
6
7
8
9
10
11
<ul>
   <li>...</li>
   <li>
      <a href="javascript: void(0);">Рубрика</a>
      <div id='podrubrika'>
           <div id='subhead'></div>
           <div id='submenu'>тута список подрубрик</div>
      </div>
   </li>
   <li>...</li>
</ul>

Я не задал событие на div с id='podrubrika', потому что часть этого div'a перекрывает другие менюшки (он у меня с изгибом идет), поэтому события mouseout поставил на <div id='subhead'> и <div id='submenu'>

Добавлено через 1 минуту
в js-коде опечатка, должно быть так

JavaScript
1
2
3
$('#submenu').mouseout(function() {
    $('#podrubrika').css({'display':'none'});
});

и тоже самое для <div id='subhead'>

JavaScript
1
2
3
$('#subhead').mouseout(function() {
    $('#podrubrika').css({'display':'none'});
});

@Daredevi1 · 10.04.2012, 13:39

А если попробовать вместо mouseout mouseleave?

@Nigepas · 10.04.2012, 14:17

Да это

Сообщение от Daredevi1

mouseout mouseleave

не даст ничего. Там из-за особенностей визуализации события mouseout навешаны на несколько совершенно разных div-ов, и событие происходит многократно, при выходе из одного, потом из другого, когда курсор быстро пересекает все эти элементы. И на каком-то этапе заглючивается.
Получается, у вас и при выходе из subhead все захлопывается , и при выходе из submenu тоже. А если курсор вообще не попадет на них, тогда как будет? вообще не захлопнется? ))
Хорошо бы увидеть реальную страницу визуально со стилями, а так это танцы с бубном...

Добавлено через 11 минут
Там скорей всего потребуется комплексное вмешательство и в js , и в дерево документа.

__PION__ · 10.04.2012, 14:17 **[ТС]**

Сообщение от Nigepas

Хорошо бы увидеть реальную страницу визуально со стилями, а так это танцы с бубном...

Да, тока щас я на работе, вечером тока из дома.

Сообщение от Nigepas

А если курсор вообще не попадет на них, тогда как будет?

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

Сообщение от Nigepas

вообще не захлопнется? ))

возможно стоит поменять логику, а то навешивать событие на несколько div'ов мне с самого начало не понравилось, но не смог придумать решение лучше.

Не по теме:

а как тут скрин вставить не подскажите?

Добавлено через 38 секунд

Сообщение от Daredevi1

А если попробовать вместо mouseout mouseleave?

незнаю даже, посмотрю как вариант

@Nigepas · 10.04.2012, 15:34

Сообщение от Love_and_Peace

Не по теме:
а как тут скрин вставить не подскажите?

Не пробовал.
Ну видимо указать через редактор внешний url изображения

Добавлено через 53 минуты

Сообщение от Love_and_Peace

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

Получается, что при быстром перемещении курсора, событие mouseover не успевает возникнуть в ваших div-ах, а соответственно не возникает и mouseout. И меню не захлопывается.
Если у вас остальное действительно работает и не смущает, что div-вов несколько, то просто сделайте дополнительное захлопывание для такого случая при выходе из родительского li для ссылки (я так понимаю, что #hh - это и есть ссылка):

JavaScript
1
2
3
4
5
6
$('a#hh').mouseover(function() {
    $(this).parent('li').find('#podrubrika').stop(true,true).show(); //stop(true,true) - чтоб не зацикливалось
    $(this).parent('li').mouseout(function() {
        $(this).find('#podrubrika').hide();
    });
});

Добавлено через 15 минут
Получается, что далеко ходить не надо, и какраз это и случилось

:

Сообщение от Nigepas

А если курсор вообще не попадет на них, тогда как будет? вообще не захлопнется? ))

А вы говорите:

Сообщение от Love_and_Peace

Такое не случится, ...

__PION__ · 10.04.2012, 18:58 **[ТС]**

Сообщение от Nigepas

А вы говорите:

да, точно. не подумал, что

Сообщение от Nigepas

не успевает возникнуть в ваших div-ах, а соответственно не возникает и mouseout

.
Ваш код вроде работает, тока моргает (зацикливается).
Вот прикрепляю скрин, чтобы картина стала ясней

__PION__ · 10.04.2012, 19:02 **[ТС]**

там где написано "Недвижимость" - это один div, а где список - второй. Они находятся внутри общего div'a, который закрывает собой и пункты "Новостройки" и "Агентства", поэтому я не поставил событие на общий div

@Nigepas · 10.04.2012, 19:26

Да, я догадался ))
Из-за того что выходит из одного дива и входит в другой, будут скакать.
Нужно избавляться от перекрывания общим div-ом корневых li средствами html+css. Вариантов реализации несколько на самом деле. Чем быстрей вы решитесь переделать верстку, тем быстрей получите результат

__PION__ · 10.04.2012, 19:50 **[ТС]**

над этим подумаю.
а как на счет второго вопроса, не знаете как обновить страницу на jQuery?

@Nigepas · 10.04.2012, 20:08

Ну можно div общий попробовать сделать так, например

CSS
1
2
3
#podrubrika {display:inline-block; position:relative; /*или absolute*/ /*ширина маленькая*/} 
#subhead  {display:inline-block; position:absolute; /*ширина маленькая + свой background*/} 
#submenu  {position:absolute; /*ширина большая + свой background*/}

Вложенность дивов сохранится , а перекрываться ничего не будет, тогда hover() можно вешать на общий #podrubrika (пока курсор будет находиться на #subhead,#submenu он будет оставаться фактически внутри #podrubrika, и скакать будет меньше)

JavaScript
1
2
3
4
5
6
7
$('a#hh').mouseover(function() {
    $(this).parent('li').find('#podrubrika').stop(true,true).show(); //stop(true,true) - чтоб не зацикливалось
    $(this).parent('li').find('#podrubrika').hover(
        function() {},
        function() {$(this).hide();}
    });
});

Но лучше всего конечно не подставлять под курсор перекрывающий div, а менять стиль li, а субменю открывать ниже.

Добавлено через 15 минут

Сообщение от Love_and_Peace

а как на счет второго вопроса, не знаете как обновить страницу на jQuery?

А что собственно вам мешает использовать document.location.replace() ?
JavaScript он и в Африке JavaScript

__PION__ · 10.04.2012, 21:33 **[ТС]**

Сообщение от Nigepas

JavaScript он и в Африке JavaScript

Незнаю, почему то в IE не срабатывает аякс запрос при этом.
Тема вот какая, я аяксом удаляю выборочно объявления, и я хочу чтобы блок, в котором есть список объявлений обновился (без перезагрузки страницы), но почему то не обновляется список.
Поэтому подумал может просто перезагрузить страницу.
В Мозиле к примеру такой код срабатывает

JavaScript
1
2
3
4
5
6
// Удаляем объявления
if (confirm('Вы действительно хотите удалить выбранные объявления?')) {
    delete_ads(ads_num, from);
    // Обновление списка
    $("#adsajaxmess").css({'display':'block'});
}

где delete_ads - ф-я удаления объявлений

JavaScript
1
2
3
4
// Удалить выбранные объявления
function delete_ads(ads_num, from) {
    $.post("ajax/ajax_ads_delete.php", {"ads_num": ads_num}, ads_newlist(from));
}

Но тут обновление списка искуственное, т.е., я строю в файле ajax_ads_delete.php новый список и подставляю, но этот список уже ни на что не реагирует (например, при клику по главному чекбоксу не выделяются объявления в списке, тока после перезагрузки срабатывает).
Если есть какой-нибудь метод, котрый перезагрузит блок со списком без перезагрузки, то перезагрузка не нужна. Метод load() чет не срабатывает, вабще ниче не происходит

@Nigepas · 10.04.2012, 21:45

Не, не надо ничего перезагружать. Аяксом - значит аяксом.

Обработчики , которые должны срабатывать на элементах, сгенерированных на странице с помощью JavaScript , необходимо подключать через .live()

Добавлено через 2 минуты
Вы так делаете?

__PION__ · 10.04.2012, 22:06 **[ТС]**

Сообщение от Nigepas

Вы так делаете?

нет, у меня так начинается

JavaScript
1
$(document).ready(function(){

Куда live() поставить?

@Nigepas · 10.04.2012, 22:11

Сообщение от Love_and_Peace

но этот список уже ни на что не реагирует (например, при клику по главному чекбоксу не выделяются объявления в списке

Это происходит по какому-то событию же (click или change)?
Вот и подключайте обработчики не через .click(function(){...}) или .change(function(){...}) , а через .live("click",function(){...}) или .live("change",function(){...})

Или покажите JS , где это все происходит.

__PION__ · 10.04.2012, 22:21 **[ТС]**

да, все стоит на click(), поменял как вы сказали, происходит че-то непонятное, jQuery наполовину стал работать (некоторые скрипты работают, некотрые нет), а проблема осталась

@Nigepas · 10.04.2012, 22:27

Надо код видеть, я ж не экстрасенс

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@Nigepas 40 / 40 / 14 Регистрация: 07.04.2012 Сообщений: 98
	10.04.2012, 11:53
	Странное решение - борьба с глюком через перезагрузку )), если я это вообще правильно понял. Можно код посмотреть? Это решаемые проблемы. 0

@Nigepas 40 / 40 / 14 Регистрация: 07.04.2012 Сообщений: 98
	10.04.2012, 13:18
	Можно еще кусок html с самим меню? Там через ul и li сделано с вложенностью ? Или как? Иерархия тоже важна. Жаль, что не видно визуально, кто там кого перекрывает. Было б легче ответить... 0

@Daredevi1 311 / 303 / 78 Регистрация: 09.05.2009 Сообщений: 723
	10.04.2012, 13:39
	А если попробовать вместо mouseout mouseleave? 0

__PION__ 960 / 801 / 85 Регистрация: 21.07.2010 Сообщений: 3,522
	10.04.2012, 19:02 [ТС]
	там где написано "Недвижимость" - это один div, а где список - второй. Они находятся внутри общего div'a, который закрывает собой и пункты "Новостройки" и "Агентства", поэтому я не поставил событие на общий div 0

@Nigepas 40 / 40 / 14 Регистрация: 07.04.2012 Сообщений: 98
	10.04.2012, 19:26
	Да, я догадался )) Из-за того что выходит из одного дива и входит в другой, будут скакать. Нужно избавляться от перекрывания общим div-ом корневых li средствами html+css. Вариантов реализации несколько на самом деле. Чем быстрей вы решитесь переделать верстку, тем быстрей получите результат 1

__PION__ 960 / 801 / 85 Регистрация: 21.07.2010 Сообщений: 3,522
	10.04.2012, 19:50 [ТС]
	над этим подумаю. а как на счет второго вопроса, не знаете как обновить страницу на jQuery? 0

@Nigepas 40 / 40 / 14 Регистрация: 07.04.2012 Сообщений: 98
	10.04.2012, 21:45
	Не, не надо ничего перезагружать. Аяксом - значит аяксом. Обработчики , которые должны срабатывать на элементах, сгенерированных на странице с помощью JavaScript , необходимо подключать через .live() Добавлено через 2 минуты Вы так делаете? 1

__PION__ 960 / 801 / 85 Регистрация: 21.07.2010 Сообщений: 3,522
	10.04.2012, 22:21 [ТС]
	да, все стоит на click(), поменял как вы сказали, происходит че-то непонятное, jQuery наполовину стал работать (некоторые скрипты работают, некотрые нет), а проблема осталась 0

@Nigepas 40 / 40 / 14 Регистрация: 07.04.2012 Сообщений: 98
	10.04.2012, 22:27
	Надо код видеть, я ж не экстрасенс 0