Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.12.2012, 13:55
Новичок на форуме
Отправить личное сообщение для boberjs Посмотреть профиль Найти все сообщения от boberjs
 
Регистрация: 14.12.2012
Сообщений: 3

Поиск элементов 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>
Ответить с цитированием
  #2 (permalink)  
Старый 14.12.2012, 14:15
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

можешь попробовать добавлять при ховере на room класс active и писать
$('.room.active').css({"background":"yellow"});


добавить класс:
$(this).addClass('active');

удалить класс при потере ховера:
$(this).removeClass('active');


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

Последний раз редактировалось tsigel, 14.12.2012 в 14:23.
Ответить с цитированием
  #3 (permalink)  
Старый 14.12.2012, 14:25
Новичок на форуме
Отправить личное сообщение для boberjs Посмотреть профиль Найти все сообщения от boberjs
 
Регистрация: 14.12.2012
Сообщений: 3

не выходит что-то, а полный код можно?
у меня не получается определить с ховера на тултипе какой room нужно подсвечивать, они все подсвечиваются
Ответить с цитированием
  #4 (permalink)  
Старый 14.12.2012, 14:36
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

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


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

Последний раз редактировалось tsigel, 14.12.2012 в 14:53.
Ответить с цитированием
  #5 (permalink)  
Старый 14.12.2012, 14:42
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

И ещё, если не менять структуру, то без ещё одного кода tooltip будет всегда появляться в одном и том-же месте, и с room3 до него не добраться но совершив событие mouseout. Необходимо ещё менять координаты tooltip.
Ответить с цитированием
  #6 (permalink)  
Старый 14.12.2012, 14:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

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>
Ответить с цитированием
  #7 (permalink)  
Старый 14.12.2012, 15:06
Новичок на форуме
Отправить личное сообщение для boberjs Посмотреть профиль Найти все сообщения от boberjs
 
Регистрация: 14.12.2012
Сообщений: 3

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

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

Ответить с цитированием
  #8 (permalink)  
Старый 14.12.2012, 15:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

boberjs,
http://javascript.ru/formatting
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск элементов на другой странице chudikos Events/DOM/Window 4 10.11.2012 10:12
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
поиск элементов в DOM Bebarr Swallow Общие вопросы Javascript 1 24.06.2011 14:57
Перебор DOM элементов DjDiablo jQuery 3 04.02.2011 16:26
DOM, определение стиля элементов Maximor17 Общие вопросы Javascript 3 04.11.2010 16:24