Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="display: flex; width: 100%; justify-content: space-evenly;" class="just"> <div>Текст</div> <div>Текст</div> <div>Текстолит</div> </div> </body> <style> @import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic); .just div{ width: 300px; height: 300px; display: flex; margin: 10px; justify-content: center; align-items: center; background-color: black; color: white; font-size: 16px; font-family: Montserrat; transition-duration: 0.3s; } .just div.class1{ transition-duration: 0.3s; box-shadow: 0px 0px 20px 30px rgba(0, 0, 0, 0.44); } </style> <script> let div = Array.from(document.querySelectorAll('.just div')) div.forEach(function(add){ add.addEventListener('mouseover', function(){ add.classList.add('class1') }) add.addEventListener('mouseout', function(){ add.classList.remove('class1') }) }) </script> </html>
