Question

我有一个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;
 }

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

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

1 个答案: