Запускает дочернее состояние при наведении курсора мыши на родительский элемент - возможно ли это?

ProgramBox

Запускает дочернее состояние при наведении курсора мыши на родительский элемент — возможно ли это?

Post author:admin
Запись опубликована:23 сентября, 2022
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть родительский контейнер с вложенными дочерними элементами. Все дочерние элементы передаются в контейнер, и их количество неизвестно. Их тип может быть любым — заголовки, абзацы, интервалы, разделы и т. Д. Все эти дочерние элементы будут иметь некоторое предопределенное состояние при наведении курсора (наведение определяется за пределами родительской области, обычно пользователем, который создает эти элементы) — изменение цвета, фона, подчеркивания текста.

Я ищу способ запуска состояния onhover всех вложенных дочерних элементов при наведении курсора на родительский элемент. Есть ли способ сделать это с помощью JS и CSS?

Редактировать: это будет жить в области React со стилизованными компонентами

Edit2: обновил демонстрационный код примером реакции, поскольку обсуждение перешло в другое русло.

Подчеркивая эту часть описания: все дочерние элементы передаются в контейнер, и их количество неизвестно. Их тип может быть любым — заголовки, абзацы, интервалы, разделы и т. Д. Все эти дочерние элементы будут иметь некоторое предопределенное состояние при наведении курсора

https://codesandbox.io/s/brave-bhabha-oh70d
Демо здесь:?

Ответ №1:

Да, вы можете сделать это так, наведя курсор на .box-main элемент и вызвав дочерний элемент вместе с ним.

 .box {
  border: 1px solid red;
}
.box-main {
  border: 1px solid green;
  background: grey;
  padding: 15px;
}

.box-main:hover h1{
  background: salmon;
}

.box-main:hover span{
  background: aqua;
}

.box-main:hover p{
  background: lime;
}

 <div class="container">
  <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid temporibus minus odio nemo, aperiam asperiores, nostrum corrupti velit non illo saepe vero quisquam eius delectus optio dolor, quos architecto maiores.
  </div>
  <div class="box box-main">
    <h1>This is h1</h1>
    <span>Foloowed by span</span>
    <p>First paragraph</p>
    <p>First paragraph</p>
    <div>lorem div</div>
  </div>
  <div class="box">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, repudiandae quidem? Architecto ad omnis quos atque facilis fuga minus ipsa ab temporibus laudantium, ipsam est eos quia unde fugiat autem.
  </div>
</div>

1. @AbsoluteBeginner что вы имеете в виду?

2. При наведении курсора мыши на родительский элемент цвет фона <div>lorem div</div> не меняется. OP написал: «Я ищу способ инициировать состояние onhover для всех вложенных дочерних элементов при наведении курсора на родительский элемент».

3. Если вы ссылаетесь на .box Lorem div, который не является дочерним элементом .box-main , вам нужно будет использовать этот CSS-код, чтобы это работало: box-main:hover .box{ background: lime;} Вот jsfiddle этого: jsfiddle.net/ecsuakft/4

4. Нет, я ссылаюсь на <div> lorem div</div> .

5. В любом случае, мне нравится ваше решение. Я только что проголосовал за это.

Ответ №2:

В этом случае вы можете использовать каскадный характер стиля, наведение курсора на родительский элемент также вызовет наведение курсора на верхние родительские элементы, поэтому css вы можете добавить псевдоселектор наведения курсора в .box класс :

 .box {
  border: 1px solid red;
}
.box-main {
  border: 1px solid green;
  background: grey;
  padding: 15px;
}
.box:hover > h1 {
   background: salmon;
}

.box:hover span {
  background: aqua;
}
.box:hover p{
  background: lime;
}

 <div class="container">
  <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid temporibus minus odio nemo, aperiam asperiores, nostrum corrupti velit non illo saepe vero quisquam eius delectus optio dolor, quos architecto maiores.
  </div>
  <div class="box box-main">
    <h1>This is h1</h1>
    <span>Foloowed by span</span>
    <p>First paragraph</p>
    <p>First paragraph</p>
    <div>lorem div</div>
  </div>
  <div class="box">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, repudiandae quidem? Architecto ad omnis quos atque facilis fuga minus ipsa ab temporibus laudantium, ipsam est eos quia unde fugiat autem.
  </div>
</div>