Вход

Просмотр полной версии : Div внутри Div. Как сделать hover только для самого верхнего?

Siend
19.03.2015, 21:37
Заранее извиняюсь что немного не по теме. Вопрос казалось бы простой, но гуглпоиск мне не помог.

<div id="A" >
<div id="B" >
<div id="C" ></div>
</div>
</div>

На каждый блок навешан hover перекрашивающий блок в черный цвет.
Так вот суть проблемы в том, что когда хочу выделить элемент B, то меняют цвет и A и B. Аналогично для C - меняют цвет все три элемента. Понятно, что происходит это потому что курсор вроде как во всех трех одновременно, но как можно однозначно идентифицировать элемент в котором сейчас находится курсор?
рони
19.03.2015, 22:09
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>
Siend
19.03.2015, 22:16
Идею понял, благодарю)