Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   появление блока при наведении JS (https://javascript.ru/forum/misc/49626-poyavlenie-bloka-pri-navedenii-js.html)

1mmortal 21.08.2014 16:31
появление блока при наведении JS
 
Вот у меня есть скрипт, он рабочий, при наведении на <div id="block">Сюда надо навести</div> появляется <div rel="block" class="hover">Текст появится</div>

мне нужно сделать так, что после того как появился <div rel="block" class="hover">Текст появится</div> и я навел на него мышкой он не исчезал, пока я не выйду курсором за его границы! Подправьте пожалуйста этот скрипт, или может предложите свой вариант!
<script>
$(document).ready(function(){
$('.hover').each(function(){
var hover=$(this);
hover.hide();
$("#"+hover.attr('rel')).hover(function(){
hover.toggle(0);
});
});
});
</script>

<div id="block">Сюда надо навести</div>
<div rel="block" class="hover">Текст появится</div>

Pavel M. 21.08.2014 17:09
не знаю для чего это нужно,
но может быть достаточно просто Css решения?

http://learn.javascript.ru/play/noLmec

1mmortal 21.08.2014 18:01
Цитата:
Сообщение от Pavel M. (Сообщение 326887)
не знаю для чего это нужно,
но может быть достаточно просто Css решения?

http://learn.javascript.ru/play/noLmec
А как тогда так сделать, если элементы находятся в разных блоках
допустим
<div id="w1">
<div id="block">Сюда надо навести</div>
</div>
<div id="w2">
<div rel="block" class="hover">Текст появится</div>
</div>

skrudjmakdak 21.08.2014 18:43
фух, написал))
<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>

Pavel M. 21.08.2014 18:54
Цитата:
Сообщение от 1mmortal
А как тогда так сделать, если элементы находятся в разных блоках
можно использовать немного JS
http://learn.javascript.ru/play/53uHYb

skrudjmakdak 21.08.2014 19:07
Pavel M., во-первых у меня с расширенным функционалом, а во-вторых у вас криво

1mmortal 21.08.2014 21:40
Цитата:
Сообщение от skrudjmakdak (Сообщение 326923)
фух, написал))
<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>
Спасибо большое)


Часовой пояс GMT +3, время: 10:58.