悬停时更改 SVG 填充和文本突出显示颜色
Change SVG Fill and text highlight color on hover
我有一个带有 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 width="20" height="20" 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>
您为两个块指定了相同的 class。悬停时， 属性 会针对收到悬停的元素发生变化。也就是说，当您将鼠标悬停在文本上时，文本的 fill 属性 会发生变化，而 SVG 不会。
对于您的任务，您应该只对父 <a> 元素使用 .nav-icon class。并更改两个元素的 :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 width="20" height="20" 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>
很难从提供的代码中准确判断您想要完成什么。但这里有一些您可能有兴趣使用 Tailwind 完成的情况，实际上不需要额外的 CSS。
情况 1 - 悬停时相同颜色的图标和文本颜色发生变化
这是最常见的情况，用户将鼠标悬停在元素上，图标和文本一起变化。为此，您只需要 SVG 上的 class 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 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
的 Tailwind Play
最简单的版本是：
<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>
我有一个带有 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 width="20" height="20" 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>
您为两个块指定了相同的 class。悬停时， 属性 会针对收到悬停的元素发生变化。也就是说，当您将鼠标悬停在文本上时，文本的 fill 属性 会发生变化，而 SVG 不会。
对于您的任务，您应该只对父 <a> 元素使用 .nav-icon class。并更改两个元素的 :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 width="20" height="20" 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>
很难从提供的代码中准确判断您想要完成什么。但这里有一些您可能有兴趣使用 Tailwind 完成的情况，实际上不需要额外的 CSS。
情况 1 - 悬停时相同颜色的图标和文本颜色发生变化
这是最常见的情况，用户将鼠标悬停在元素上，图标和文本一起变化。为此，您只需要 SVG 上的 class fill-current 和父元素上的 hover:text-{your-color}（在您的情况下为锚标记）。这是 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>