Div внутри Div. Как сделать hover только для самого верхнего?
Заранее извиняюсь что немного не по теме. Вопрос казалось бы простой, но гуглпоиск мне не помог.
<div id="A" >
<div id="B" >
<div id="C" ></div>
</div>
</div>
На каждый блок навешан hover перекрашивающий блок в черный цвет. Так вот суть проблемы в том, что когда хочу выделить элемент B, то меняют цвет и A и B. Аналогично для C - меняют цвет все три элемента. Понятно, что происходит это потому что курсор вроде как во всех трех одновременно, но как можно однозначно идентифицировать элемент в котором сейчас находится курсор? |
Siend,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
padding: 20px;
margin: 20px;
}
#A {
background: #FF3300;
}
#B {
background: #0000FF;
}
#C {
background: #006633;
}
#A.black,
#B.black,
#C.black {
background: #000000;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(function() {
$("div").on('mouseover mouseleave', function(event) {
event.stopPropagation();
$("div").removeClass('black');
$(this).toggleClass('black', event.type == 'mouseover')
})
});
</script>
</head>
<body>
<div id="A">
<div id="B">
<div id="C"></div>
</div>
</div>
</body>
</html>
|
Идею понял, благодарю)
|
| Часовой пояс GMT +3, время: 18:47. |