Форум

1mmortal · #1 (**permalink**) 21.08.2014, 16:31

Вот у меня есть скрипт, он рабочий, при наведении на <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. · #2 (**permalink**) 21.08.2014, 17:09

не знаю для чего это нужно,
но может быть достаточно просто Css решения?

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

1mmortal · #3 (**permalink**) 21.08.2014, 18:01

Сообщение от Pavel M.

не знаю для чего это нужно,
но может быть достаточно просто 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 · #4 (**permalink**) 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. · #5 (**permalink**) 21.08.2014, 18:54

Сообщение от 1mmortal

А как тогда так сделать, если элементы находятся в разных блоках

можно использовать немного JS
http://learn.javascript.ru/play/53uHYb

skrudjmakdak · #6 (**permalink**) 21.08.2014, 19:07

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

1mmortal · #7 (**permalink**) 21.08.2014, 21:40

Сообщение от skrudjmakdak

фух, написал))

<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>

Спасибо большое)

Форум

Справочник

Discord чат

Курсы javascript