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>