Войти
Меню :
css (138)



Blog (1572)
php (388)
js (294)
html (151)
css (138)
html tags (62)
js tag (56)
js method (44)
jquery (42)
php array (38)
text (37)
ruweb.net (37)
js date (33)
online (30)
fonts (30)
form html (30)
Показать еще :
js events (22)
php file (21)
other (21)
atom (20)
foto (20)
database (19)
forum (19)
input (19)
php date (18)
svg (18)
lingvo (17)
info (17)
hosting (17)
mysql (17)
php img (16)
board (16)
php time (16)
dosite (16)
color (15)
img (14)
js url (14)
jsphp (14)
js time (14)
html book (14)
table (13)
знак (13)
htaccess (13)
osclass (13)
yandex (13)
notepad (13)
select (13)
dw block (12)
download (12)
keyboard (12)
php path (12)
$ server (11)
icon (11)
form (10)
vs code (10)
js delete (10)
browser (10)
chart (10)
mouse (10)
ftp (9)
hover (8)
php url (7)
php post (7)
comment (7)
js vars (6)
php get (6)
adminka (6)
hey tag (6)
iframe (6)
click (6)
list (6)
canvas (6)
tag a (5)
web (5)
нок (5)
js id (5)
heading (5)
value (5)
js math (5)
reg.ru (5)
console (5)
mb (5)
js file (5)
year (5)
vk (4)
scandir (4)
xml (4)
task (4)
month (4)
base64 (4)
pages (4)
day (4)
bbcode (4)
js form (4)
ssl (4)
week (4)
js hash (4)
numbers (4)
php var (4)
symbols (4)
youtube (4)
games (4)
submit (4)
aimp (3)
units (3)
file (3)
video (3)
рся (3)
captcha (3)
line (3)
padding (3)
js post (3)
ucoz (3)
https (3)
jquery post (3)
куб (3)
money (3)
domen (3)
qr code (2)
details (2)
height (2)
src (2)
counter (2)
tag hr (2)
sitemap (2)
prompt (2)
seo (2)
arrows (2)
google (2)
blob (2)
js img (2)
typeof (2)
scroll (1)
rutube (1)
windows (1)
cursor (1)
jino (1)
speed (1)
lingvo (1)
ok (1)
archive (1)
smile (1)
php day (1)
нод (1)
webp (1)

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

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

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

  1. Hover при наведении на дочерний срабатывал на родительском?
  2. Код: при наведении на дочерний, "hover" на родительском
    Пример: при наведении на дочерний, "hover" на родительском
  3. Hover при наведении на родительский срабатывал на дочернем?
  4. Код: при наведении на родительский, "hover" на дочернем
    Пример: при наведении на родительский, "hover" на дочернем

  1. 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>

    Пример воздействие на родителя при наведении мыши на дочерний элемент:

    Смотрим живой пример воздействие на родителя посредством наведения мыши на дочерний элемент:

    На отдельной странице

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

    В этом пункте сделаем ситуацию обратной: "Hover при наведении на родительский срабатывал на дочернем?"

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

    Html:

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

    class="parent"

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

    <span class="child1">1</span>
    <span class="child2">2</span>

    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" на дочернем


    текст_ссылки
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Теги:
hover дочерний родитель hover родительский дочерний
На сайте сейчас :
dwweb.ru есть здесь:
Все соцсети в одном месте!
Ещё :Игра "пятнашки"
Угадай страну по флагу
+
Как сделать сайт?
Md5 онлайн
Списки шифрования
Sitemap.html
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Лучший хостинг : RUWEB + помощь по RUWEB Сайт работает круглосуточно 24/7.
Страница загружена за : 2.384079 секунд.