показ/скрытие дива по событию
Прошу подсказать в решении проблемы с дивами..
Есть хтмл код вида:
<div class="comm" onMouseOver="open()" onMouseOut="close()" onMouseMove="open()">
<div id="Name">
Имя
</div>
<div id="Mess">
Сообщение
</div>
<div id="Date">
Дата
</div>
<div id="{х}" style="display:none">
ID: {id}<br>IP: {ip}<br>UA: {ua}
</div>
</div>
В таком виде (немного упрастил вид) выводятся комментарии в админке. Функции open() и close() открывают див с id="{x}" и закрывают его соответственно. Но вот появилась проблема, при перемещении курсора внутри класса "comm", див с id="{x}" то закрывается то открывается. Как можно решить данную проблему с закрыванием? |
Если есть возможность использовать jQuery, можно применить метод .hover().
|
Amphiluke,
желательно как-то без jQuery. |
Вот (из старых запасов) грубый пример проблемы и ее возможного решения (раскомментировать закомментированное):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hover example</title>
<style type="text/css">
.outer {
position: relative;
width: 220px;
height: 96px;
border: solid 1px black;
background-color: coral;
}
.inner {
position: absolute;
top: 40px;
left: 40px;
border: solid 1px black;
background-color: khaki;
}
#outer2 {
margin-top: 24px;
}
</style>
<script type="text/javascript">
function overout(evnt) {
var e = (evnt) ? evnt : event;
/* var p = (e.relatedTarget) ? e.relatedTarget : ((e.type == "mouseover") ? e.fromElement : e.toElement);
while (p && p != this) try { p = p.parentNode; } catch(e) { p = this; }
if (p == this) return; */
document.getElementById("console").innerHTML += (e.type == "mouseover") ? "mouse enter!!<br>" : "mouse leave!!<br>";
}
window.onload = function() {
var outer2 = document.getElementById("outer2");
outer2.onmouseover = overout;
outer2.onmouseout = overout;
}
</script>
</head>
<body>
<div class="outer" id="outer2">
Outer 2
<div class="inner" id="inner2">Inner 2</div>
</div>
<div id="console"></div>
</body>
</html>
Как видно, при наведении на дочерние элементы, срабатывает событие mouseout родительского. Однако используя свойство relatedTarget (fromElement/toElement для IE), этого можно избежать |
Amphiluke,
спасибо) |
| Часовой пояс GMT +3, время: 22:26. |