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

Question

[Антон Вебсайтовский]

Всем привет, вопрос очень простой, подскажите как объединить 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;
}

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

Answer 1

[Шохрух Шаймардонов]

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

или

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

Comments

[Антон Вебсайтовский]

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

[Шохрух Шаймардонов]

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

[Rustam Bainazarov]

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

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

[Антон Вебсайтовский]

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

[Антон Вебсайтовский]

Шохрух Шаймардонов, вообще да, внутренние 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>

[Шохрух Шаймардонов]

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

// Применит всем дивам, являющимся напрямую дочерними элементами (не внукам)
.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]

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

[Антон Вебсайтовский]

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

[Антон Вебсайтовский]

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

[Антон Вебсайтовский]

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

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

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