NeonMan,
Пример: hover вариант 1
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div.hot{
width: 100px;
height: 100px;
border: 1px dashed Gray;
padding: 5px;
}
.Red{
background-color: Red;
}
.menu-kazan:hover{
background-color: #CEF5FC;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="hot Red" id="kazan">kazan</div>
<div class="hot menu-kazan">menu-kazan</div>
<script>
$('#kazan').on('mouseenter mouseleave', function(event) {
var color = event.type == 'mouseenter' ? '#CEF5FC' : '';
$('.menu-kazan').css('backgroundColor', color);
});
</script>
</body>
</html>
Пример: hover вариант 2
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div.hot{
width: 100px;
height: 100px;
border: 1px dashed Gray;
padding: 5px;
}
.Red{
background-color: Red;
}
.menu-kazan:hover, .menu-kazan.hover{
background-color: #CEF5FC;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="hot Red" id="kazan">kazan</div>
<div class="hot menu-kazan">menu-kazan</div>
<script>
$('#kazan').on('mouseenter mouseleave', function(event) {
$('.menu-kazan').toggleClass('hover', event.type == 'mouseenter')
});
</script>
</body>
</html>