Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Div внутри Div. Как сделать hover только для самого верхнего? (https://javascript.ru/forum/misc/54504-div-vnutri-div-kak-sdelat-hover-tolko-dlya-samogo-verkhnego.html)

Siend 19.03.2015 20:37

Div внутри Div. Как сделать hover только для самого верхнего?
 
Заранее извиняюсь что немного не по теме. Вопрос казалось бы простой, но гуглпоиск мне не помог.

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


На каждый блок навешан hover перекрашивающий блок в черный цвет.
Так вот суть проблемы в том, что когда хочу выделить элемент B, то меняют цвет и A и B. Аналогично для C - меняют цвет все три элемента. Понятно, что происходит это потому что курсор вроде как во всех трех одновременно, но как можно однозначно идентифицировать элемент в котором сейчас находится курсор?

рони 19.03.2015 21: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 21:16

Идею понял, благодарю)


Часовой пояс GMT +3, время: 05:21.