Изменение цвета заливки SVG и выделения текста при наведении курсора

Question

У меня есть пункт меню Nav с изображением SVG. В настоящее время, если я наведу курсор на SVG, он станет красным, а мой текст станет белым. Однако при наведении курсора на текст он становится белым, а SVG не становится красным. Когда я нахожу курсор на SVG или текст, я хочу, чтобы и то и другое изменилось. Я пробовал это, но это не сработало.

Answer 1

Из предоставленного кода сложно точно сказать, чего вы пытаетесь достичь. Но вот несколько обстоятельств, в которых вы можете быть заинтересованы с помощью Tailwind, и дополнительный CSS действительно не нужен.

Ситуация 1. Значок одного цвета и цвет текста меняются при наведении курсора.

Это наиболее частая ситуация, когда пользователь наводит курсор на элемент, и значок и текст меняются вместе. Для этого вам понадобится только класс fill-current на SVG и hover:text-{your-color}на родительском элементе (тег привязки в вашем случае). Вот пример этого в Tailwind Play https://play.tailwindcss.com/Zy2tdj05Tf

Простой пример этого будет выглядеть так:

      <a href="#" class="text-gray-400 hover:text-white">
  <svg class="fill-current"> <!-- some svg code --> </svg>
</a>

Полный код из игры Tailwind:

      <a href="#" class="bg-blue-900 text-gray-400 hover:text-white flex items-center py-2 px-2 text-sm font-medium rounded-md group border-l-4 border-transparent">
   <svg width="20" height="20" class="flex-none mr-3 fill-current" aria-hidden="true">
     <path d="M2.3999 6.0001C2.3999 4.67461 3.47442 3.6001 4.7999 3.6001H13.1999C14.5254 3.6001 15.5999 4.67461 15.5999 6.0001V10.8001C15.5999 12.1256 14.5254 13.2001 13.1999 13.2001H10.7999L7.1999 16.8001V13.2001H4.7999C3.47442 13.2001 2.3999 12.1256 2.3999 10.8001V6.0001Z"/>
     <path d="M17.9999 8.4001V11.6001C17.9999 13.8092 16.209 15.6001 13.9999 15.6001H11.794L9.67397 17.7201C10.0097 17.8988 10.393 18.0001 10.7999 18.0001H13.1999L16.7999 21.6001V18.0001H19.1999C20.5254 18.0001 21.5999 16.9256 21.5999 15.6001V10.8001C21.5999 9.47461 20.5254 8.4001 19.1999 8.4001H17.9999Z"/>
   </svg>
   Message
</a>

Ситуация 2 - Другой цвет значка и текста при наведении курсора

Менее распространено, когда пользователь наводит курсор, и значок и текст меняются, но имеют разные цвета друг от друга. Это аналогичная настройка, но вам нужно будет сделать родительский элемент группой и использовать group-hoverдля изменения цвета текста независимо от SVG. А вот и попутный ветер https://play.tailwindcss.com/Jsx4bOtQwx

Самый простой вариант этого:

      <a href="#" class="text-gray-400 hover:text-white group">
  <svg class="group-hover:text-red fill-current"> <!-- some svg code --> </svg>
</a>

И полный код из примера Play:

      <a href="#" class="bg-blue-900 text-gray-400 group hover:text-green-600 flex items-center py-2 px-2 text-sm font-medium rounded-md group border-l-4 border-transparent">
    <svg width="20" height="20" class="flex-none group-hover:text-red-600 mr-3 fill-current" aria-hidden="true">
      <path d="M2.3999 6.0001C2.3999 4.67461 3.47442 3.6001 4.7999 3.6001H13.1999C14.5254 3.6001 15.5999 4.67461 15.5999 6.0001V10.8001C15.5999 12.1256 14.5254 13.2001 13.1999 13.2001H10.7999L7.1999 16.8001V13.2001H4.7999C3.47442 13.2001 2.3999 12.1256 2.3999 10.8001V6.0001Z"/>
      <path d="M17.9999 8.4001V11.6001C17.9999 13.8092 16.209 15.6001 13.9999 15.6001H11.794L9.67397 17.7201C10.0097 17.8988 10.393 18.0001 10.7999 18.0001H13.1999L16.7999 21.6001V18.0001H19.1999C20.5254 18.0001 21.5999 16.9256 21.5999 15.6001V10.8001C21.5999 9.47461 20.5254 8.4001 19.1999 8.4001H17.9999Z"/>
    </svg>
    Message
</a>

Answer 2

Вы указали один и тот же класс для обоих блоков. И при наведении указателя изменяется свойство для элемента, получившего наведение. То есть, когда вы наводите курсор мыши на текст, fill свойство изменяется для текста, а не для SVG.

Для вашей задачи вы должны использовать .nav-icon класс для родителя <a>только элемент. И изменить на :hover Свойства CSS для обоих элементов: