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

14.12.2012, 14:00. **Показов** 1015. **Ответов** 2

Студворк — интернет-сервис помощи студентам

привет!

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

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

картинка

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

картинка

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

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

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

HTML5
1
2
3
4
5
6
<div class="map">
   <div class="room">1</div>
   <div class="room">2</div>
   <div class="room">3</div>
</div>
<div class="tooltip">tooltip</div>

код целиком:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!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>

@demix · 14.12.2012, 15:37

Лучше всего, конечно же, в каждый room по тултипу добавить и тогда никаких проблем.
Но если нет возможности менять код, то необходимо наладить взаимосвязь по айди или по чему-то иному.
Логично, что содержимое подсказки будет меняться взависимости от выбранного room.

14.12.2012, 15:42

спасибо!

Новые блоги и статьи Все статьи Все блоги /
Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определенном условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .

@demix 21 / 20 / 9 Регистрация: 26.09.2012 Сообщений: 62
	14.12.2012, 15:37
	Лучше всего, конечно же, в каждый room по тултипу добавить и тогда никаких проблем. Но если нет возможности менять код, то необходимо наладить взаимосвязь по айди или по чему-то иному. Логично, что содержимое подсказки будет меняться взависимости от выбранного room. 0

boberjs
	14.12.2012, 15:42
	спасибо!

Опции темы