Javascript-форум - Поиск элементов DOM

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Поиск элементов DOM (https://javascript.ru/forum/jquery/33933-poisk-ehlementov-dom.html)

Поиск элементов DOM

привет!

делаю тултипы и столкнулся с проблемой выбора нужного элемента:

1) при наведении мышки на первый блок всплывает подсказака(tooltip)

2) при наведении на сам тултип нужно чтобы подсвечивался этот первый блок, а у меня получается что цвет меняется у всех блоков этого класса

// проблемное место, которое присваивает цвет всем блокам.
room.css({"background":"yellow"});

подскажите, пожалуйста, как выбрать только тот блок с которого идет переход на тултип и подсвечивать желтым только его, другие серым.

при чем эта структура не должна меняться

<div class="map">
   <div class="room">1</div>
   <div class="room">2</div>
   <div class="room">3</div>
</div>
<div class="tooltip">tooltip</div>

код целиком:

<!doctype html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <title>ТИТЛЫ</title>   
  <!--[if lt IE 9]>  
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 
  <style type="text/css">
  	.map {
  		background: red;
  		height: 100px;
  		width: 308px;
  		margin: 70px auto;
  		position: relative;
  	}
  	.room {
  		border: 1px solid red;
  		height: 98px;
  		width: 98px;
  		background: grey;
  		position: relative;
  		display: inline-block;
  		cursor: pointer;
  	}
  	.tooltip {
  		background: green;
  		padding: 20px;
  		position: absolute;
  		top: 20px;
  		left: 43%;
  	}
  </style> 
</head>  
<body> 

	<div class="map">
		<div class="room">1</div>
		<div class="room">2</div>
		<div class="room">3</div>
	</div>
	<div class="tooltip">tooltip</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
	var room = $(".room");
	var tooltip = $(".tooltip");
	tooltip.hide();
	room.css({"background":"grey"});
	room.hover(function() {
		tooltip.show();
		tooltip.hover(function() {
			$(this).show();
			// проблемное место
			room.css({"background":"yellow"});
		});
		$(this).css({"background":"yellow"});
	}, function(){
		room.css({"background":"grey"});
		tooltip.hide();
		tooltip.mouseout(function() {
			$(this).hide();
			room.css({"background":"grey"});
		});
	});
</script>
</body>  
</html>

можешь попробовать добавлять при ховере на room класс active и писать

$('.room.active').css({"background":"yellow"});

добавить класс:

$(this).addClass('active');

удалить класс при потере ховера:

$(this).removeClass('active');

кстати изменение цвета также правильнее будет поставить в css на селектор '.room.active', тогда цвет не будет прописываться в html во время работы скрипта.

не выходит что-то, а полный код можно?
у меня не получается определить с ховера на тултипе какой room нужно подсвечивать, они все подсвечиваются

<style type="text/css">
...
.room.active {
   background: yellow;
}
</style>
<script type="text/javascript">
    var room = $(".room");
    var tooltip = $(".tooltip");
    tooltip.hide();

    room.hover(function() {
        $(this).addClass('active');
        tooltip.show();
        tooltip.hover(function() {
            $(this).show(); // Это что? $(this) у тебя сейчас = tooltip, но он и так показан. Зачем тогда?
            // проблемное место            
        });
    }, function(){
        $(this).removeClass('active');
        tooltip.hide();
        tooltip.mouseout(function() {
            $(this).hide();
        });
    });
</script>

Что-то типа такого. Если сделаешь здесь ссылку на редактируемый вариант - могу покопаться (тут же есть функционал чтобы можно было тестить прямо на сайте).

И ещё, если не менять структуру, то без ещё одного кода tooltip будет всегда появляться в одном и том-же месте, и с room3 до него не добраться но совершив событие mouseout. Необходимо ещё менять координаты tooltip.

boberjs,
Вариант...

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ТИТЛЫ</title>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
  <style type="text/css">
  	.map {
  		background: red;
  		height: 100px;
  		width: 308px;
  		margin: 70px auto;
  		position: relative;
  	}
  	.room {
  		border: 1px solid red;
  		height: 98px;
  		width: 98px;
  		background: grey;
  		position: relative;
  		display: inline-block;
  		cursor: pointer;
  	}
  	.tooltip {
  		background: green;
  		padding: 20px;
  		position: absolute;
  		top: 20px;
  		left: 43%;
  	}
  </style>
</head>
<body>

	<div class="map">
		<div class="room">1</div>
		<div class="room">2</div>
		<div class="room">3</div>
	</div>
	<div class="tooltip">tooltip</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
	var room = $(".room");
	var tooltip = $(".tooltip");
	tooltip.hide();
    var r ;
	room.css({"background":"grey"});
	room.hover(function() {
        r = $(this)
        tooltip.show();
		tooltip.hover(function() {
			$(this).show();
			// проблемное место
		   r.css({"background":"yellow"});
		});
		r.css({"background":"yellow"});
	}, function(){
		r.css({"background":"grey"});
		tooltip.hide();
		tooltip.mouseout(function() {
			$(this).hide();
			r.css({"background":"grey"});
		});
	});
</script>
</body>
</html>

Огромное спасибо тебе!!! :)
последний вариант работает полностью как нужно, по поводу позиционирования тултипа - там будет через php еще вставка, которая решает эту проблему

подскажи, а как ты сделал код для просмотра сразу? я его не могу найти, первый день на сайте)

:thanks: