Как объединить hover для всех дивов внутри блоков?

Question

Антон Вебсайтовский @ws17

CSS

Как объединить hover для всех дивов внутри блоков?

Всем привет, вопрос очень простой, подскажите как объединить hover, для всех дивов внутри блоков.
Есть блок, в нем есть дивы, при наведении на блок, срабатывает hover для всех дивов что внутри блока.

Как можно этот код оптимизировать?

.ota:hover .otb1{
  background: #f7f7f7;
}
.ota:hover .otb2{
  background: #f7f7f7;
}
.ota:hover .otb3{
  background: #f7f7f7;
}

Пробовал по разному, не вышло, не работало.
Есть конечно вариант сделать так.

.ota:hover .otb1, .ota:hover .otb2, .ota:hover .otb3{
  background: #f7f7f7;
}

Код короче выходит, но может еще как-то короче сделать можно?

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

Комментировать

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

Пригласить эксперта

Ответы на вопрос 1

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

Антон Вебсайтовский @ws17 Автор вопроса

я бы так сделал, но внутри просто не один див. а еще есть.

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta

Антон Вебсайтовский, тогда разделите их каким-нибудь атрибутом, как правило, дайте нужным блокам общий класс, чтобы прописать короткий css, но тут уже вздутие в html. Так что, выбирайте что вам подходит, дутый html или css?
Есть еще вариант отобрать нужные блоки без доп классов, но вы не приводите подробный html, поэтому не смогу помочь

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

Шохрух Шаймардонов, вы это добавьте в ответ, пожалуйста.

Антон Вебсайтовский, других вариантов, кроме тех, что описали вы в вопросе и автор ответа, — нет.

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Рустам Байназаров, понял. спасибо.

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

Антон Вебсайтовский @ws17 Автор вопроса

Шохрух Шаймардонов, вообще да, внутренние div можно заменить типа span или еще чет.

суть такая:

<div class="ota br1">
              <div class="otb1">
                <div class="oc">
                  <b>Неделя</b><
                  30.09 – 6.10
                </div>
              </div>
              <div class="otb2">
                <div class="oc">
                  <b class="rs">+1</b>
                </div>
              </div>
              <div class="otb3">
                <div class="oc">
                  <b class="rs">+2</b>
                </div>
              </div>
            </div>

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

Шохрух Шаймардонов @joeberetta

Антон Вебсайтовский, всмысле???

// Применит всем дивам, являющимся напрямую дочерними элементами (не внукам)
.ota:hover > div

это чем не помогло??

Если вы не поняли, то .ota > div, означает:

<div class="ota br1">
              <div class="otb1"> <!-- Затронет тут -->
                <div class="oc"> <!-- Но НЕ тут, т.к. селектор ">" ищет напрямую дочерние элементы (1 уровня вложенности), но не те, что внутри них -->
                  <b>Неделя</b><
                  30.09 – 6.10
                </div>
              </div>
              <div class="otb2">
                <div class="oc">
                  <b class="rs">+1</b>
                </div>
              </div>
              <div class="otb3">
                <div class="oc">
                  <b class="rs">+2</b>
                </div>
              </div>
            </div>

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

Rustam Bainazarov @SmthTo Куратор тега CSS

Антон Вебсайтовский, дайте им общий класс. Явно одинаковые по смыслу элементы.

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Шохрух Шаймардонов, а вот оно что, а то я думал затронет все дивы.

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Рустам Байназаров, нет не одинакове, там адптация все дела и центрование.

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса
Работает (.ota:hover > div), проверял, правда срабатывает и на заголовки в блоке ) ну да ладно, оставил свой сокращенный метод.

.ota:hover .otb1, .ota:hover .otb2, .ota:hover .otb3{ background: #f7f7f7; }

Доп стиль для заголовков не стал делать, ибо кода будет больше ) оставлю как есть.
Написано более трёх лет назад

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

Войдите, чтобы написать ответ

Войти через центр авторизации

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

JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 2 часа назад
- 15 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- 3 часа назад
- 22 просмотра
1

ответ
HTML

+1 ещё

Средний
Как поместить картинку рядом с текстом?
- 1 подписчик
- 6 часов назад
- 51 просмотр
1

ответ
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 10 часов назад
- 64 просмотра
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 14 часов назад
- 381 просмотр
1

ответ
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- вчера
- 1773 просмотра
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- вчера
- 61 просмотр
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- вчера
- 199 просмотров
4

ответа
CSS

Простой
Почему нет задержки между повторами анимации?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему пустой div смещается, если ему задать margin-bottom?
- 2 подписчика
- вчера
- 180 просмотров
1

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

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Frontend React

Glob-com

от 100 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Анимация логотипа

24 апр. 2024, в 00:08

20000 руб./за проект

Разработка дизайна раздела «Статьи» на сайте «Мир отходов»

23 апр. 2024, в 23:01

10000 руб./за проект

Дизайн личного кабинета (клиентская часть)

23 апр. 2024, в 22:37

500 руб./в час

Answer 1 · 2019-11-09 17:46:02

// Применит абсолютно всем дивам у которых родитель .ota
.ota:hover div

или

// Применит всем дивам, являющимся напрямую дочерними элементами (не внукам)
.ota:hover > div

Как объединить hover для всех дивов внутри блоков?

Войдите, чтобы написать ответ

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

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