Форум

Siend · #1 (**permalink**) 19.03.2015, 21:37

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

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

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

рони · #2 (**permalink**) 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 · #3 (**permalink**) 19.03.2015, 22:16

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

Форум

Справочник

Discord чат

Курсы javascript