Показать сообщение отдельно
  #4 (permalink)  
Старый 21.08.2014, 18:43
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

фух, написал))
<html>
	<head>
		<title>example</title>
		<style>
.block
{
overflow: hidden;
}

.over
{
float: left;
}

.item
{
float: left;
margin-left: 10px;
display: none;
}
		</style>
	</head>
	<body>
<div class="block">
	<div class="over" group="g1">over</div>
	<div class="item" group="g1">block 1</div>
	<div class="item" group="g1">block 2</div>
</div>

<div class="block">
	<div class="over" group="g2">over</div>
	<div class="item" group="g2">block 3</div>
	<div class="item" group="g2">block 4</div>
	<div class="item" group="g2">block 5</div>
</div>

<div class="block">
	<div class="over" group="g3">over</div>
	<div class="item" group="g3">block 6</div>
	<div class="item" group="g3">block 7</div>
</div>

		<script>
 function show (dom)
	{
	var group = dom.getAttribute('group'),
		selector = '*[group=' + group + ']';
	
	var doms = document.querySelectorAll(selector);
	var time = null;
	
	Array.prototype.forEach.call(doms, function (ths)
		{
		ths.onmouseover = function ()
			{
			if (time)
				{
				clearTimeout(time);
				return;
				}
			
			Array.prototype.forEach.call(doms, function (ths)
				{
				if (ths != dom)
					ths.style.display = 'block';
				});
			};
		
		ths.onmouseout = function ()
			{
			time = setTimeout(function ()
				{
				time = null;
				Array.prototype.forEach.call(doms, function (ths)
					{
					if (ths != dom)
						ths.style.display = 'none';
					});
				}, 1000);
			};
		});
	}
	
Array.prototype.forEach.call(document.querySelectorAll('.over'), function (ths)
	{
	show(ths);
	});
		</script>
	</body>
</html>
Ответить с цитированием