Форум

Сергей Ракипов · #31 (**permalink**) 21.06.2020, 11:36

Простите. но я не понимаю

Как мне получить содержимое блок2 при наведении блок1 в такой структуре, и что бы это содержимое не отображалось при отводе от блока

<div class="blok1">блок обертка
        <div class="blok2">блок 
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
        <div class="blok2">блок 
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
        <div class="blok2">блок 
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
    </div>

Если можно но не много объяснить, я пробую повторять под свои нужды но не выходит, а документация сложно дается.

Я пробовал по разному но не могу понять как сделать коректно.

рони · #32 (**permalink**) 21.06.2020, 13:31

Сергей Ракипов,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
.blok1 .blok2{
     display: none;
}
.blok1:hover .blok2{
     display: block;
}
</style>
</head>
<body>
<div class="blok1">блок обертка
        <div class="blok2">блок
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
        <div class="blok2">блок
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
        <div class="blok2">блок
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
    </div>


</body>
</html>

Сергей Ракипов · #33 (**permalink**) 21.06.2020, 14:35

Сообщение от рони

Сергей Ракипов,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
.blok1 .blok2{
     display: none;
}
.blok1:hover .blok2{
     display: block;
}
</style>
</head>
<body>
<div class="blok1">блок обертка
        <div class="blok2">блок
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
        <div class="blok2">блок
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
        <div class="blok2">блок
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
    </div>


</body>
</html>

не правильно выразился

<div class="blok2-1">блок1</div> вот это блок, и их может быть множество и для каждого свой <div class="blok2-2">блок2</div>

рони · #34 (**permalink**) 21.06.2020, 15:26

Сергей Ракипов,

.blok2-1 + .blok2-2{
     display: none;
}
.blok2-1:hover + .blok2-2{
     display: block;
     background-color: hsla(60, 100%, 90%, 1);
}

Сергей Ракипов · #35 (**permalink**) 21.06.2020, 15:49

Сообщение от рони

Сергей Ракипов,

.blok2-1 + .blok2-2{
     display: none;
}
.blok2-1:hover + .blok2-2{
     display: block;
     background-color: hsla(60, 100%, 90%, 1);
}

Да я хочу с помощью js хочу сделать, может и проще, но я учусь.
И мне интересно как это можно сделать.
Сделаю сохраняю скрипт, может в будущем понадобится

рони · #36 (**permalink**) 21.06.2020, 16:29

Сообщение от Сергей Ракипов

я хочу с помощью js хочу сделать

вам давали ссылку
https://javascript.ru/forum/events/8...tml#post525963
пример
https://javascript.ru/forum/misc/805...tml#post526148
всё тоже самое и тут

Сергей Ракипов · #37 (**permalink**) 21.06.2020, 16:33

Сообщение от рони

вам давали ссылку
https://javascript.ru/forum/events/8...tml#post525963
пример
https://javascript.ru/forum/misc/805...tml#post526148
всё тоже самое и тут

Я пробовал, добросовестно убил пол дня.
И вот как там сделать у меня получается.
Но разница в том что Ребенок на котрого там наводится он и подвержен изменениям, а у меня на одного ребёнка нужно навестить а к другому применить изменения.
Там по разному верстка.

Все что было в этом топике я прочитал

рони · #38 (**permalink**) 21.06.2020, 16:35

Сергей Ракипов,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
.blok2-1 + .blok2-2{
     display: none;
     color: red;
}

</style>
</head>
<body>
<div class="blok1">блок обертка
        <div class="blok2">блок
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
        <div class="blok2">блок
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
        <div class="blok2">блок
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
    </div>

<script>
let change = {
handleEvent(event) {
const target = event.target.closest('.blok2-1');
if (!target) return;
target.nextElementSibling.style.display = event.type == 'mouseenter' ? 'block' : 'none';
}};
document.addEventListener('mouseenter', change, true);
document.addEventListener('mouseleave', change, true);
</script>
</body>
</html>

рони · #39 (**permalink**) 21.06.2020, 16:38

Сергей Ракипов,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
.blok2-1 + .blok2-2{
     display: none;
     color: red;
}
.blok2-1.active + .blok2-2{
     display: block;
}


</style>
</head>
<body>
<div class="blok1">блок обертка
        <div class="blok2">блок
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
        <div class="blok2">блок
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
        <div class="blok2">блок
            <div class="blok2-1">блок1</div>
            <div class="blok2-2">блок2</div>
        </div>
    </div>

<script>
let change = {
handleEvent(event) {
const target = event.target.closest('.blok2-1');
if (!target) return;
target.classList.toggle('active', event.type == 'mouseenter');
}};
document.addEventListener('mouseenter', change, true);
document.addEventListener('mouseleave', change, true);
</script>
</body>
</html>

Сергей Ракипов · #40 (**permalink**) 21.06.2020, 16:45

рони,
Сел разбираться

Форум

Справочник

Discord чат

Курсы javascript