主页 / 问题 / 1109795
Accepted
spoon 100500
Asked:2020-04-13 22:52:46 +0800 CST2020-04-13 22:52:46 +0800 CST

悬停在 svg 图中

  • 772

svg g:hover {
  fill: red;
}

svg:hover {
  fill: white;
}
<svg width="300" height="100">
 <defs>
   <filter id="shadow" x=-50% y=-50% width=200% height=200%>
       <feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="#333" flood-opacity=".1" />
    </filter>
  </defs>
  <g fill="#fdd">
  <rect filter="url(#shadow)" width="270" height="60" x="15" y="15" rx="25" />
  <polygon points="280 50  260 70  290 85" />
  </g>
  <text x="50%" y="50%"font-size="20" text-anchor="middle" font-family="Gilroy Medium ">Этот кот в SVG</text>
</svg>

告诉我，当鼠标悬停在文本上时，svg 应该保存 fill: red; 如何实施？

css3

1 个回答

  1. Best Answer

    svg：悬停文本

    <svg width="300" height="100">
 <defs>
   <style>
     text{
       pointer-events: none;
     }
     svg:hover text{
       fill: #fff;
     }
     svg g:hover{
       fill: red;
     }
   </style>
   <filter id="shadow" x=-50% y=-50% width=200% height=200%>
       <feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="#333" flood-opacity=".2" />
    </filter>
  </defs>
  <g fill="#fdd">
  <rect filter="url(#shadow)" width="270" height="60" x="15" y="15" rx="25" />
  <polygon points="280 50  260 70  290 85" />
  </g>
  <text x="50%" y="50%"font-size="20" text-anchor="middle" font-family="Gilroy Medium ">Этот кот в SVG</text>
</svg>

    • 4

相关问题