Приветствую всех! При реализации всплывающих попапов при наведении на ссылку столкнулся с проблемой бесконечной генерации событий mouseenter и mouseleave в том случае, когда всплывающий попап перекрывает область элемента, на который навешены события - происходит мерцание попапа при нахождении мышли в области, где перекрываются элементы управления.
Пожалуйста, подскажите, как можно решить (обойти) эту проблему. Ниже пример кода и несколько скриншотов.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Mouse enter | mouse leave test</title>
<style type="text/css">
a
{
display:block;
text-align:center;
width:200px;
height:50px;
top: 120px;
left: 182px;
position: absolute;
background: #F9A;
}
div
{
background: Yellow;
border: solid Orange 1px;
width: 159px;
height: 181px;
top: 26px;
left: 67px;
position: absolute;
display: none;
opacity: 0.5;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#aTest').mouseenter(function () {
$('#popup').show();
});
$('#aTest').mouseleave(function () {
$('#popup').hide();
});
});
</script>
</head>
<body>
<a id="aTest" href="#">Н А В Е Д И</a>
<div id="popup">
<strong>Заголовок</strong>
<p>Текст, текст, текст, текст, текст, текст</p>
<p>Текст, текст, текст</p>
</div>
</body>
</html>