Применить анимацию ко всем одинаковым классам?

Question

TipTop89 @TipTop89

JavaScript

Применить анимацию ко всем одинаковым классам?

Подскажите пожалуйста как применить тень при наведении ко всем блокам с классом even-link(и наоборот ко всем блокам с классом odd-link)? Применяется сейчас только к одному блоку. Спасибо

Вопрос задан более трёх лет назад
54 просмотра

5 комментариев

Подписаться 1 Средний 5 комментариев

Semantic.Moscow @SemanticMoscow

скажите, только у меня jsfiddle.net не отвечает?

Написано более трёх лет назад
Ximik009 @Ximik009

Semantic.Moscow, да, только у тебя

Написано более трёх лет назад
Алексей Ярков @yarkov Куратор тега JavaScript

Semantic.Moscow, нет, у меня тоже недоступен уже давно. Ростелеком, Ростовская область

Написано более трёх лет назад
Semantic.Moscow @SemanticMoscow

Алексей Ярков, спасибо.
а то я уже начал косо поглядывать в сторону своего pdnsd

Написано более трёх лет назад

Noder SS @noder_ss

<!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>

Так что-ли?

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Fullstack-разработчик на JavaScript + ИИ

11 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.

Похожие вопросы

JavaScript

+2 ещё

Средний
Стоит ли переносить логику работающего онлайн-калькулятора с JS на PHP ради защиты формул от копирования?
- 3 подписчика
- 18 мая
- 1838 просмотров
8

ответов
JavaScript

Простой
Почему вместо галереи owl-gallery белое пространство?
- 1 подписчик
- 18 мая
- 67 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Почему окно fancybox по ajax открывается и сразу закрывается?
- 1 подписчик
- 15 мая
- 87 просмотров
2

ответа
JavaScript

Простой
Как упростить/ улучшить получение данных?
- 1 подписчик
- 14 мая
- 151 просмотр
2

ответа
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 356 просмотров
2

ответа
JavaScript

Простой
Будет ли корректно работать сортировка везде?
- 1 подписчик
- 01 мая
- 183 просмотра
4

ответа
JavaScript

Простой
Почему ничего не происходит — элементы p не добавляются на страницу?
- 1 подписчик
- 01 мая
- 117 просмотров
1

ответ
JavaScript

Простой
Почему при написании цикла for of работает, а при другом цикле не работает?
- 1 подписчик
- 15 апр.
- 401 просмотр
3

ответа
JavaScript

Простой
Почему зависает приложение? Почему не работает функция сортировки?
- 1 подписчик
- 14 апр.
- 254 просмотра
1

ответ
JavaScript

Простой
Почему не работает фильтрация?
- 1 подписчик
- 14 апр.
- 184 просмотра
1

ответ
Показать ещё Загружается…

скажите, только у меня jsfiddle.net не отвечает?
Semantic.Moscow, нет, у меня тоже недоступен уже давно. Ростелеком, Ростовская область
Алексей Ярков, спасибо.
а то я уже начал косо поглядывать в сторону своего pdnsd
<!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>

Так что-ли?

Применить анимацию ко всем одинаковым классам?

Вопрос закрыт для ответов и комментариев

Минуточку внимания

Войдите на сайт