Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.03.2015, 21:37
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

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

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


На каждый блок навешан hover перекрашивающий блок в черный цвет.
Так вот суть проблемы в том, что когда хочу выделить элемент B, то меняют цвет и A и B. Аналогично для C - меняют цвет все три элемента. Понятно, что происходит это потому что курсор вроде как во всех трех одновременно, но как можно однозначно идентифицировать элемент в котором сейчас находится курсор?
Ответить с цитированием
  #2 (permalink)  
Старый 19.03.2015, 22:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,372

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>
Ответить с цитированием
  #3 (permalink)  
Старый 19.03.2015, 22:16
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

Идею понял, благодарю)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать? Выделение текста в div при нажатии на ссылку Olena Элементы интерфейса 3 01.03.2015 19:01
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Как сделать чтобы пользователь только мог 2 раза прослушать запись? KOTDG AJAX и COMET 0 11.02.2012 21:37
Как сделать чтобы text() брал только текст родителя без текста вложенных контейнеров? Andrey32 jQuery 3 23.05.2009 01:33
Как сделать функцию типа toDataUrl для рисунка в ie6 ? Олег Общие вопросы Javascript 2 14.09.2008 00:06