Простите. но я не понимаю
Как мне получить содержимое блок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>
Если можно но не много объяснить, я пробую повторять под свои нужды но не выходит, а документация сложно дается. Я пробовал по разному но не могу понять как сделать коректно. |
Сергей Ракипов,
:-?
<!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> |
Сергей Ракипов,
.blok2-1 + .blok2-2{
display: none;
}
.blok2-1:hover + .blok2-2{
display: block;
background-color: hsla(60, 100%, 90%, 1);
}
|
Цитата:
И мне интересно как это можно сделать. Сделаю сохраняю скрипт, может в будущем понадобится |
Цитата:
https://javascript.ru/forum/events/8...tml#post525963 пример https://javascript.ru/forum/misc/805...tml#post526148 всё тоже самое и тут |
Цитата:
И вот как там сделать у меня получается. Но разница в том что Ребенок на котрого там наводится он и подвержен изменениям, а у меня на одного ребёнка нужно навестить а к другому применить изменения. Там по разному верстка. Все что было в этом топике я прочитал |
Сергей Ракипов,
<!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>
|
Сергей Ракипов,
<!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>
|
рони,
Сел разбираться |
| Часовой пояс GMT +3, время: 23:09. |