Показать сообщение отдельно
  #38 (permalink)  
Старый 21.06.2020, 16:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Сергей Ракипов,
<!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>
Ответить с цитированием