Hover дочерний/родитель

02.12.2023 Марат 311 css

Отследить hover родитель/дочерний и наоборот? При наведении на "дочерний сработает hover на родитель ". С обязательным кодом и примерами!

Все о hover родитель/дочерний и hover дочерний/родитель

Hover при наведении на дочерний срабатывал на родительском?

Код: при наведении на дочерний, "hover" на родительском

Пример: при наведении на дочерний, "hover" на родительском

Hover при наведении на родительский срабатывал на дочернем?

Код: при наведении на родительский, "hover" на дочернем

Пример: при наведении на родительский, "hover" на дочернем

Hover при наведении на дочерний срабатывал на родительском?

Для того, чтобы при наведении на дочерний элемент срабатывал "hover" на родительском блоке... вам понадобится:

Не буду останавливаться на всем коже построчно, да и думаю вам это тоже не к чему! А выведем некоторые аспекты, на которых нужно остановиться!

Html:

В ниже приведенном коде вы можете увидеть "Родительский блок" блок с классом "class="parent".

В нем расположен "Дочерний блок" с классом class="child".

Далее нам потребуется css , с помощью которого и мы и напишем код, при давлении на дочерний блок срабатывал hover на родительском блоке!

Css:

При наведении на родительски блок отключаем pointer-events.

pointer-events: none;

А на дочернем элементе ставим "pointer-event" auto.

pointer-events: 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 при наведении на родительский срабатывал на дочернем?"

Аналогично, не буду рассказывать каждую строчку, а самое необходимое...

Html:

Опять, родительский блок будет:

class="parent"

Внутрь родительского блока поместим два дочерних(один из них "child2" будет невиден -> display none см в стилях):

Css:

С css все просто... при наведении на родительский блок...

Блок class="child1" сделаем "невидимым"(display none).

А блок class="child2" сделаем видимым с помощью display block/

Далее соберем весь код:

Код: при наведении на родительский, "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" на дочернем

текст_ссылки

Не стесняемся говорить спасибо!

Теги:
hover дочерний родитель
hover родительский дочерний

На сайте сейчас :