Показать сообщение отдельно
  #1 (permalink)  
Старый 10.05.2009, 11:00
Аспирант
Отправить личное сообщение для WalterScott Посмотреть профиль Найти все сообщения от WalterScott
 
Регистрация: 10.05.2009
Сообщений: 57

Событие mouseout при наведении мыши на пункт меню
Делаю обычное выпадающее меню. При наведении мыши на заголовок меню оно выпадает, при onmouseout убирается.
Проблема в том, что onmouseout возникает при перемещении курсора мыши по меню, когда курсор наводится на ссылку - пункт меню. По идее, после mouseout на диве(выпавшем меню), должно возникнуть mouseover на ссылке и так как у ссылки нет своего обработчика события mouseover, событие должно всплыть до дива и меню при этом должно остаться на своем месте(ну или в крайнем случае мигнуть, как бывает в таких случаях). Но меню исчезает.
<html>
<head>
	<style>		
		div.menu ul {padding-top:0; float:right;}
		div.menu ul li {float:left; list-style:none; font-weight:bold; padding-right:15px;  }
		div.menu ul li div.fall { visibility:hidden; background-color:#4682B4; }
	</style>
	<title>Введение в DOM</title>
	<script src="jquery-1.3.2.js"></script>
	<script>
	
			$(document).ready(function() {
			
				var titles = $("div.menu ul li #tab a");
				menuDiv = '';
				for (var i = 0; i < titles.length; i++) {
					var title = titles[i]; 
					title.onmouseover = function(e) {
						if (menuDiv != '') menuDiv.style.visibility = "hidden";
						var e = e || window.event;  
						var t = e.target || e.srcElement; 
						menuDiv = navigator.appName == 'Microsoft Internet Explorer' 
							? t.parentNode.parentNode.childNodes[1] : t.parentNode.parentNode.childNodes[2];
						menuDiv.style.visibility = "visible";

						menuDiv.onmouseout = function(e) {
							menuDiv.style.visibility = "hidden";
						}
						
			
					};

				}
				
			});
	</script>		
</head>
<body>
<div class="menu"> 
    <ul>
		<li class="current"><div id="tab">Главная</div>
		    <div class="fall">
				<a href="">item 1</a>

				<a href="">item 2</a>

				<a href="">item 3</a>

			</div>		
		</li>
		<li><div id="tab"><a href="/chords/about/">Ноты</a></div>
		    <div class="fall">
				<a href="">item 1</a>

				<a href="">item 2</a>

				<a href="">item 3</a>
			
			</div>
		</li>
		<li><div id="tab"><a href="/chords/tab/">Табулатуры</a></div>
		    <div class="fall">
				<a href="">item 1</a>

				<a href="">item 2</a>

				<a href="">item 3</a>
			
			</div>		
		</li>
		<li><div id="tab"><a href="/chords/services/">Доска обьявлений</a></div>
		    <div class="fall">
				<a href="">item 1</a>

				<a href="">item 2</a>

				<a href="">item 3</a>
			
			</div>		
		</li>
		<li><div id="tab"><a href="/chords/feedbacks/">Контакты</a></div>
		    <div class="fall">
				<a href="">item 1</a>

				<a href="">item 2</a>

				<a href="">item 3</a>
			
			</div>		
		</li>
	</ul> 
</div>
</body>
</html>
Ответить с цитированием