悬停时更改 SVG 的笔触和填充颜色答案

【问题标题】：Change stroke and fill color of SVG when hovered悬停时更改 SVG 的笔触和填充颜色
【发布时间】：2016-08-02 10:16:19
【问题描述】：

我有一个 SVG 图像，它的周围有一个笔划，它的颜色值与填充图标的颜色值相同。图标位于图像内的背景上。这是我的例子：https://jsfiddle.net/o48629qs/

我想要完成的是，当项目悬停时，六边形周围的笔划与图标颜色相同，使其背景保持黑色。我的代码如下。不知道为什么它不起作用，因为我需要路径在悬停时改变颜色。

HTML

 <svg class=“instagram” data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 445.33 500.72">
    <title>Untitled-9</title>
    <g id="border">
      <path d="M225.64,495.55a33.25,33.25,0,0,1-16.6-4.44L29.94,387.72A33.29,33.29,0,0,1,13.33,359V152.16a33.29,33.29,0,0,1,16.6-28.74L209,20a33.25,33.25,0,0,1,33.21,0l179.1,103.38a33.29,33.29,0,0,1,16.61,28.74V358.93a33.26,33.26,0,0,1-16.63,28.81L242.24,491.11A33.26,33.26,0,0,1,225.64,495.55Z"
      transform="translate(-2.97 -5.19)" style="fill:#141516" />
      <path d="M225.64,25.9A22.84,22.84,0,0,1,237.06,29l179.1,103.38a22.87,22.87,0,0,1,11.43,19.77V358.93a22.78,22.78,0,0,1-11.43,19.82L237.06,482.14a22.89,22.89,0,0,1-22.85,0L35.11,378.75A22.87,22.87,0,0,1,23.69,359V152.16a22.87,22.87,0,0,1,11.43-19.77L214.21,29a22.84,22.84,0,0,1,11.43-3.06m0-20.71A43.62,43.62,0,0,0,203.85,11L24.75,114.45A43.67,43.67,0,0,0,3,152.16V359a43.67,43.67,0,0,0,21.78,37.71l179.1,103.39a43.61,43.61,0,0,0,43.57,0L426.48,396.71a43.64,43.64,0,0,0,21.82-37.78V152.11a43.67,43.67,0,0,0-21.78-37.71L247.42,11a43.61,43.61,0,0,0-21.78-5.83h0Z"
      transform="translate(-2.97 -5.19)" style="fill:#ff0000" />
    </g>
    <path d="M275.94,173.55H175.33a31.73,31.73,0,0,0-31.69,31.69V305.86a31.73,31.73,0,0,0,31.69,31.69H275.94a31.73,31.73,0,0,0,31.69-31.69V205.24A31.73,31.73,0,0,0,275.94,173.55Zm9.09,18.9h3.62v27.8l-27.7.09-0.09-27.8Zm-82.8,46.27a28.82,28.82,0,1,1-5.46,16.83A28.84,28.84,0,0,1,202.23,238.71Zm89.43,67.14a15.73,15.73,0,0,1-15.72,15.71H175.33a15.73,15.73,0,0,1-15.72-15.71V238.71H184.1a44.85,44.85,0,1,0,83.08,0h24.49v67.14Z"
    transform="translate(-2.97 -5.19)" style="fill:#ff0000" />
  </svg>
</a>

CSS

 a svg {
   width: 6rem;
   height: 6rem;
   -webkit-transform: translate(0, 0);
   transform: translate(0, 0);
   transition: all 0.3s;
 }

 a svg:hover {
   -webkit-transform: translate(0, -10px);
   transform: translate(0, -10px);
 }

 a svg path#fill:hover {
   fill: #00ffff !important;
 }

【问题讨论】：

您的 css 无法正常工作，因为您无法将鼠标悬停在“#fill”上，您可以在 svg 上使用悬停来更改 svg 中包含的路径的填充

标签： html css svg

【解决方案1】：

这个 css 应该适合您（将绿色更改为您选择的任何颜色）

 a svg:hover g path:last-child{
   fill: green !important;
 }

 a svg:hover g + path{
   fill: green !important;
 }

叉你小提琴，这是一个演示https://jsfiddle.net/iamnottony/gu2e9nf3/1/

【讨论】：