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

14.12.2012, 14:00. **Показов** 1012. **Ответов** 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 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

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

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