悬停在 SVG 路径的未填充区域上不起作用答案

【问题标题】：Hover Doesn't Work On Unfilled Areas of SVG Path悬停在 SVG 路径的未填充区域上不起作用
【发布时间】：2019-10-20 06:40:09
【问题描述】：

我有一个 portfilio (https://portfolio.umairstem.now.sh/) 主页，其中有 svg 图标。当鼠标悬停在图标上时，我希望它变成浅蓝色。问题是当鼠标移过 SVG 中的间隙时，效果不会出现。如果我不清楚，下图显示了我的意思。我尝试添加 background 或 padding 但这会取代页面上的元素。

我的 CSS 如下：

svg {
    display: inline-block;
    width: auto;
    height: 5vw;
    min-height: 2rem;
    max-height: 4rem;
    scale: 0.5;
}

.Fill-1:hover{//Fill-1 is the SVG class name
   fill: #1793D1;
}

【问题讨论】：

标签： html css svg sass

【解决方案1】：

您需要从路径中删除 class="Fill-1"。接下来，您将样式 - 正如大家提到的 - 应用到 svg 元素。

body{background:black;}
svg{fill:white;}
svg:hover{fill:skyBlue;}

&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256" viewBox="0 0 256.000000 256.000000" preserveAspectRatio="xMidYMid meet"&gt;&lt;g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"&gt;&lt;path d="M135 2552c-40-14-81-45-105-80l-25-36 0-1156 0-1156 24-35c13-19 40-46 60-60l36-24 1155 0 1155 0 36 24c20 14 47 41 60 60l24 35 0 1156 0 1156-24 35c-13 19-40 46-60 60l-36 24-1140 2c-627 0-1149-2-1160-5zm550-446c58-27 78-47 100-99 53-128-35-261-182-274-94-9-175 33-214 109-24 46-25 128-2 175 47 99 187 141 298 89zm1148-521c128-27 217-95 276-214 52-103 61-188 61-592l0-359-195 0-194 0-3 368-3 367-25 44c-45 80-113 109-206 90-60-12-112-53-143-114-20-38-21-56-21-397l0-358-195 0-195 0 0 575 0 575 195 0 195 0 0-76 0-76 51 57c101 110 233 146 402 110zm-1053-590l0-575-195 0-195 0 0 575 0 575 195 0 195 0 0-575z"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;

【讨论】：

【解决方案2】：

不要在 SVG 元素上使用 hover 伪选择器，而是在包含元素上使用它。例如：

a:hover svg {
  fill: #1793d1;
}

注意：您需要删除其他选择器和样式才能使其工作，如图所示；如果你真的想对选择器过于具体，你可以，但我不推荐。 a:hover .Fill-1 过分了。

【讨论】：

您的svg 是否在<a> 标签中？

【解决方案3】：

您可以在将鼠标悬停在包含元素上时更改路径的fill，在这种情况下可以是<svg/>：

svg:hover path {
  fill: blue
}

这是fiddle

【讨论】：

这实际上与我提供的答案相同，除了它会影响页面上的所有 SVG，甚至是非链接的 SVG，从而创建一个令人困惑的 UI。此外，它是inefficient to use :hover on non-link elements。
@coreyward 在您的回答中，您更改了 svg 的填充而不是路径。而且在IE7/8中的非链接元素上使用:hover效率很低，这是一种今天几乎没有人使用的浏览器。
fill 级联。
@coreyward 你是对的，我不知道......我的印象是你的答案因为 OP 的评论而无效