привет!
делаю тултипы и столкнулся с проблемой выбора нужного элемента:
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>