我可以在整个 svg 上添加悬停，而不仅仅是在路径上吗答案

【问题标题】：Can I add hover on whole svg not only on path我可以在整个 svg 上添加悬停，而不仅仅是在路径上吗
【发布时间】：2021-12-01 07:08:41
【问题描述】：

svg :hover{
    fill: #fff;
    transition: 0.2s;
}

当我在 svg 上添加悬停时，此效果仅在我悬停该 svg 的路径时有效。因此，当我有一些带有边界路径和中间空白空间的 svg 时，可能会出现问题。当我悬停在那个空白区域时，我能以某种方式添加这个效果吗？

【问题讨论】：

标签： html css svg

【解决方案1】：

问题在于您的选择器。 svg :hover 中的空格表示该规则仅在您将鼠标悬停在 svg 的任何后代元素上时才会执行。相反，将其更改为svg:hover path，这将在悬停在 svg 的任何部分上时起作用，但仅适用于路径。

svg:hover path{
    fill: #ffff;
    transition: 0.2s;
}

<svg width="22" height="20" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M20.925 3.641H3.863L3.61.816A.896.896 0 0 0 2.717 0H.897a.896.896 0 1 0 0 1.792h1l1.031 11.483c.073.828.52 1.726 1.291 2.336C2.83 17.385 4.099 20 6.359 20c1.875 0 3.197-1.87 2.554-3.642h4.905c-.642 1.77.677 3.642 2.555 3.642a2.72 2.72 0 0 0 2.717-2.717 2.72 2.72 0 0 0-2.717-2.717H6.365c-.681 0-1.274-.41-1.53-1.009l14.321-.842a.896.896 0 0 0 .817-.677l1.821-7.283a.897.897 0 0 0-.87-1.114ZM6.358 18.208a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm10.015 0a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm2.021-7.243-13.8.81-.57-6.341h15.753l-1.383 5.53Z"
              fill="#69707D"
              fill-rule="nonzero"
            />
          </svg>

【讨论】：

你比我快
@Eymen 是的。另外我解释了这个问题，而不仅仅是转储代码
哈哈哈，太棒了

【解决方案2】：

svg:hover path {
  fill: #ffff;
  transition: 0.2s;
}

<svg width="22" height="20" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M20.925 3.641H3.863L3.61.816A.896.896 0 0 0 2.717 0H.897a.896.896 0 1 0 0 1.792h1l1.031 11.483c.073.828.52 1.726 1.291 2.336C2.83 17.385 4.099 20 6.359 20c1.875 0 3.197-1.87 2.554-3.642h4.905c-.642 1.77.677 3.642 2.555 3.642a2.72 2.72 0 0 0 2.717-2.717 2.72 2.72 0 0 0-2.717-2.717H6.365c-.681 0-1.274-.41-1.53-1.009l14.321-.842a.896.896 0 0 0 .817-.677l1.821-7.283a.897.897 0 0 0-.87-1.114ZM6.358 18.208a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm10.015 0a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm2.021-7.243-13.8.81-.57-6.341h15.753l-1.383 5.53Z"
                  fill="#69707D"
                  fill-rule="nonzero"
                />
              </svg>

【讨论】：