Блог

Главная - Вопросы по программированию - Tailwindcss использует наведение курсора мыши на группу-наведение курсора мыши

Tailwindcss использует наведение курсора мыши на группу-наведение курсора мыши

#tailwind-css

#tailwind-css

Вопрос:

Я добавил групповое наведение курсора мыши на элемент, а также наведение курсора мыши на этот элемент. Групповое наведение курсора работает, но при наведении курсора мыши на сам элемент цвет фона не меняется.

 bg-green-500 group-hover:bg-green-200 hover:bg-green-500

Комментарии:

1. Не похоже, что это возможно сделать. Наведение group курсора будет иметь приоритет над наведением курсора элементов.

Ответ №1:

Теперь это возможно в режиме «Точно в срок» с помощью встроенного модификатора important:

 <div className="group">
  <div className="opacity-0 group-hover:opacity-50 hover:!opacity-100">
    Note the magic of the exclamation point!
  </div>
</div>

Ответ №2:

вам нужно добавить класс ‘group’ к вашему родительскому элементу следующим образом:

 <div class="group">
   <div class="bg-green-500 group-hover:bg-green-200 hover:bg-green-500">
      <div class="hover:bg-green-500">
      CONTENT 1
      </div>
      <div>
      CONTENT 2
      </div>
   </div>
</div>

он меняет фон на зеленый-200 при наведении курсора мыши на элемент группы и его дочерние элементы, такие как содержимое 2 выше, а также меняет фон на зеленый-500 при наведении курсора мыши на содержимое 1

надеюсь, это сработает 🙂