Форум

(Sandr) · #1 (**permalink**) 12.08.2011, 21:38

Прошу подсказать в решении проблемы с дивами..
Есть хтмл код вида:

<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}" то закрывается то открывается. Как можно решить данную проблему с закрыванием?

Amphiluke · #2 (**permalink**) 12.08.2011, 22:07

Если есть возможность использовать jQuery, можно применить метод .hover().

(Sandr) · #3 (**permalink**) 12.08.2011, 22:12

Amphiluke,
желательно как-то без jQuery.

Amphiluke · #4 (**permalink**) 12.08.2011, 22:43

Вот (из старых запасов) грубый пример проблемы и ее возможного решения (раскомментировать закомментированное):

<!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), этого можно избежать

(Sandr) · #5 (**permalink**) 12.08.2011, 23:23

Amphiluke,
спасибо)

Форум

Справочник

Discord чат

Курсы javascript