Не всегда срабатывает OnMouseOut для абсолютно позиционированного слоя

Leonid

PHP? нет, не слышал...
Не всегда срабатывает OnMouseOut для абсолютно позиционированного слоя

Упрощенно задача такая:
2 слоя, один небольшого размера, второй больше, поверх первого, изначально скрыт.
при наведении мыши на первый, появляется второй.
при уведении мыши с появившегося второго он снова скрывается.

код

<html>
<head>
<title>OnMouseOut test</title>
<style>

div.small {left:200px; top:200px;
width:100px; height:100px;
position:absolute;
background-color:#c0c0c0;}

div.over {position:absolute;
left:150px; display:none;
z-index:10; top:150px; width:300px;
height:300px; background-color:#99ccff;}

</style>
</head>
<body>
<div class="over" id="hhh" onmouseout="document.getElementById('hhh').style.display='none';">Появляющийся слой</div>
<div class="small" onmouseover="document.getElementById('hhh').style.display='block';">test div</div>

</body>
</html>


В принципе это работает, но если очень быстро проводить мышкой над первым слоем, то второй появляется, но не успевает исчезнуть, хотя курсор мыши уже далеко от него.
Баг во всех браузерах - IE6 b 7, Опере, ФФ

И если таких слоев несколько то они наползают друг на друга, некрасиво. Как бороться?
 

ZigFreeD

Новичок
ну как вариант попробуй задать в боди onmousemove= скрывать все открытые слои... по идеи должно помочь... надеюсь как запомнить какие слои открыты ты сам сумеешь придумать :)
 

Leonid

PHP? нет, не слышал...
Не, не проходит. В этом случае, при проведении мыши над первым слоем происходит быстрое многократное появление-исчезовение второго.
Как вариант, я придумал схему с 3 слоями, третий, самый верхний, пустой и расположен точно над первым и такого же размера. Для него назначаем и onmouseover и onmouseout. В этом случае большой средний слой пропадает, если курсор уводится с маленького (с третьего и соответственно первого)

<html>
<head>
<title>OnMouseOut test</title>
<style>

div.small {left:200px; top:200px;
width:100px; height:100px;
position:absolute;
background-color:#c0c0c0;}

div.over {position:absolute;
left:150px; display:none;
z-index:10; top:150px; width:300px;
height:300px; background-color:#99ccff;}

div.hidden {
left:200px; top:200px;
width:100px; height:100px;
position:absolute;
z-index:20;
}

</style>
</head>
<body>
<div class="hidden" onmouseover="document.getElementById('hhh').style.display='block';" onmouseout="document.getElementById('hhh').style.display='none';">&nbsp;</div>
<div class="over" id="hhh">&#207;&#238;&#255;&#226;&#235;&#255;&#254;&#249;&#232;&#233;&#241;&#255; &#241;&#235;&#238;&#233;</div>
<div class="small">test div</div>

</body>
</html>

В принципе, ничего не мешает этот третий слой увеличить до размеров второго при onmouseover, так что эффект будет полностью аналогичным..
 

dimagolov

Новичок
Leonid, прерывай обработку события добавляя return false; в обработчик, чтобы событие отрабатывалось только для верхнего объекта.
 

Leonid

PHP? нет, не слышал...
dimagolov
не понял, куда именно добавить return false ?
 

dimagolov

Новичок
Leonid обработчик события должен возвращать false для того, чтобы событие не обрабатывалось другими елементами.

добавлять в тот обработчик, который висит на событии и на котором обработка события должна закончиться.
 
Сверху