悬停时更改 SVG 填充和文本突出显示颜色

Posted 2023-03-07

【中文标题】悬停时更改 SVG 填充和文本突出显示颜色

【英文标题】：Change SVG Fill and text highlight color on hover

【发布时间】：2021-10-04 13:45:13

【问题描述】：

我有一个带有 SVG 图像的导航菜单项。目前，如果我将鼠标悬停在 SVG 上，它会变为红色，而我的文本会突出显示为白色。但是，当我将鼠标悬停在文本上时，它会突出显示为白色，但 SVG 不会变为红色。当我将鼠标悬停在 SVG 或文本上时，我希望两者都进行更改。我正在尝试这个，但它不起作用。

.nav-icon 
  fill: white;


.nav-icon:hover 
  fill: red;

<a href="#" class="nav-icon text-gray-300 hover:text-gray-100 flex items-center py-2 px-2 text-sm font-medium rounded-md group border-l-4 border-transparent">
  <svg   class="nav-icon flex-none mr-3 text-gray-400 xmlns="http://www.w3.org/2000/svg" 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>

【问题讨论】：

您说文本在悬停时变为白色，这必须在其他地方完成，因为您给定的代码中没有任何内容会改变颜色。你能建立一个有效的 sn-p （我猜，它需要包括顺风的相关部分？）。

【参考方案1】：

很难从提供的代码中准确判断您要完成什么。但这里有一些您可能有兴趣使用 Tailwind 完成的情况，并且确实不需要额外的 CSS。

情况 1 - 悬停时相同颜色的图标和文本颜色变化

这是最常见的情况，用户悬停元素，图标和文本一起变化。为此，您只需要 SVG 上的 fill-current 类和父元素上的 hover:text-your-color 类（在您的情况下为锚标记）。这是 https://play.tailwindcss.com/Zy2tdj05Tf 的 Tailwind Play 示例

一个简单的例子如下所示：

<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   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   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>

【讨论】：

请将沙箱中的代码复制到您的答案中。该网站可能会在一段时间后关闭或移动。因此，无需点击链接即可阅读代码。

好点，为了便于理解，我最初只包含了该技术的基本原理，我将添加类似于作者原始代码的完整代码。

解决方案 2 正是我想要完成的。谢谢！

【参考方案2】：

您为两个块指定了​​相同的类。悬停时，接收悬停的元素的属性会发生变化。也就是说，当您将鼠标悬停在文本上时，fill 属性会更改为文本，而不是 SVG。

对于您的任务，您应该仅将 .nav-icon 类用于父 <a> 元素。并更改两个元素的 :hover CSS 属性：

body 
  background: grey;


.nav-icon 
  color: red;


.nav-icon svg 
  fill: white;


.nav-icon:hover 
  color: white;


.nav-icon:hover svg 
  fill: red;

<a href="#" class="nav-icon text-gray-300 hover:text-gray-100 flex items-center py-2 px-2 text-sm font-medium rounded-md group border-l-4 border-transparent">
  <svg   class="flex-none mr-3 text-gray-400 xmlns="http://www.w3.org/2000/svg" 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>

【讨论】：

这一切都不需要使用常规的 CSS，这一切都可以通过 Tailwind 完成。

@JHeth 相反也是如此 :) 但主要是我更正了问题作者发布的内容。作者目前正在使用 CSS。

确实，作者可以完全避免使用 Tailwind 并将他们的项目切换为 vanilla CSS。但是，如果他们使用 Tailwind，他们应该只在绝对必要时才使用原生 CSS。

@JHeth 我本人会对在纯 Tailwind 中看到此任务的解决方案感兴趣且有用。

在 Tailwind Play 上添加了一些示例的答案，Tailwind 使 SVG 样式变得简单，group 实用程序使复杂的嵌套悬停样式成为可能:)