Отследить hover родитель/дочерний и наоборот? При наведении на "дочерний сработает hover на родитель ". С обязательным кодом и примерами!
Все о hover родитель/дочерний и hover дочерний/родитель
- Hover при наведении на дочерний срабатывал на родительском? Код: при наведении на дочерний, "hover" на родительском
- Hover при наведении на родительский срабатывал на дочернем? Код: при наведении на родительский, "hover" на дочернем
Пример: при наведении на дочерний, "hover" на родительском
Пример: при наведении на родительский, "hover" на дочернем
Hover при наведении на дочерний срабатывал на родительском?
Для того, чтобы при наведении на дочерний элемент срабатывал "hover" на родительском блоке... вам понадобится:
Не буду останавливаться на всем коже построчно, да и думаю вам это тоже не к чему! А выведем некоторые аспекты, на которых нужно остановиться!
В ниже приведенном коде вы можете увидеть "Родительский блок" блок с классом "class="parent".
В нем расположен "Дочерний блок" с классом class="child".
Далее нам потребуется css , с помощью которого и мы и напишем код, при давлении на дочерний блок срабатывал hover на родительском блоке!
При наведении на родительски блок отключаем pointer-events
А на дочернем элементе ставим "pointer-event" auto^
Соберем весь код:
Код: при наведении на дочерний, срабатывает на родительском "hover"
Соберем весь код срабатывания hover на дочернем элементе подсвечивая родительских блок!
<html>
<head>
<style>
.parent {
pointer-events: none; /* отключаем наведение курсора на .parent */
}
.parent:hover { /* стили для родительского элемента при наведении курсора .child */
background: silver;
}
.parent .child {
pointer-events: auto; /* позволяет при наведении курсора мыши на .parent */
border: 1px solid;
padding: 10px;
margin: 10px;
}
.parent .child:hover { /* стили для дочернего элемента при наведении курсора .child */
color: yellow;
}
</style>
</head>
<body>
<div class="parent">
Некоторый текст в родительском блоке ...
<div class="child">Наведите мышку на меня...</div>
Некоторый текст в родительском блоке ...
</div>
</body>
</html>
Пример воздействие на родителя при наведении мыши на дочерний элемент:
Смотрим живой пример воздействие на родителя посредством наведения мыши на дочерний элемент:
На отдельной страницеHover при наведении на родительский срабатывал на дочернем?
В этом пункте сделаем ситуацию обратной: "Hover при наведении на родительский срабатывал на дочернем?"
Аналогично, не буду рассказывать каждую строчку, а самое необходимое...
Опять, родительский блок будет:
Внутрь родительского блока поместим два дочерних(один из них "child2" будет невиден -> display none см в стилях):
<span class="child1">1</span>
<span class="child2">2</span>
С css все просто... при наведении на родительский блок...
Блок
А блок
Далее соберем весь код:
Код: при наведении на родительский, "hover" на дочернем
<html>
<head>
<style>
.child1 {
display: block;
border: 1px solid;
background: yellow;
font-size: 20px;
padding: 20px;
}
.child2 {
display: none;
border: 1px solid;
background: red;
color: aliceblue;
font-size: 20px;
padding: 20px;
}
.parent:hover .child1 {
display: none;
}
.parent:hover .child2 {
display: block;
}
.parent {
border: 1px solid;
padding: 30px;
}
</style>
</head>
<body>
<div class="parent">
<span class="child1">1</span>
<span class="child2">2</span>
</div>
</body>
</html>
Пример: при наведении на родительский, "hover" на дочернем
текст_ссылки
