如何仅将悬停应用于 X 而不是圆圈

Posted 2023-03-06

【中文标题】如何仅将悬停应用于 X 而不是圆圈

【英文标题】：How to apply hover to only the X not the circle

【发布时间】：2021-12-24 22:32:48

【问题描述】：

我如何才能将悬停过渡仅应用于 X 而不是圆圈？

如何在代码中完成？ https://jsfiddle.net/c2sah0x6/

只有 X 应该在悬停时改变颜色，而不是圆圈。

我怎么能做到这一点？

.exit 
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  animation: fadeInExit 0s forwards 0s;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);


@keyframes fadeInExit 
  99% 
    pointer-events: none;
  

  100% 
    pointer-events: initial;
    opacity: 1;
  


.exit svg 
  fill: red;
  transition: fill 3s ease;


.exit:hover svg 
  fill: green;

<button class="exit" type="button" aria-label="Close">
        <svg   viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>
            <path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)"/>
          </g>
        </svg>
      </button>

【问题讨论】：

很遗憾，您无法实现此效果，因为 svg 仅包含一个路径，其中包含圆和 X。

【参考方案1】：

为此，您需要将路径分成 2 个：圆圈和 4 个扇区。在代码示例中，基圆用黄色填充，4 个扇区用红色填充。

接下来，我在 2 条路径之间画了一个圆圈（实心黑色）。此圆圈仅在 4 个扇区下可见。

悬停时你需要改变这个圆圈的颜色：

circle:hoverfill:green

 <svg   viewBox="-144 -144 288 288">
          <g id="exit" transform="rotate(45)">
            <title>exit</title>
            <path class="exitHover" d="M-143,0A143,143,0,1,1,143,0A143,143,0,0,1,-143,0" fill="gold"/>
                                       
                                       
             <circle r="113" />
             
             
             <path class="exitHover" fill="red" d="M-15,-112A113,113,0,0,0,-112,-15H-15ZM-112,15A113,113,0,0,0,-15,112V15ZM15,112A113,113,0,0,0,112,15H15ZM112,-15A113,113,0,0,0,15,-112V-15Z" />
          </g>
        </svg>

观察：为了能够将路径拆分为 2，我使用这支笔将 d 属性更改为全绝对路径：https://codepen.io/leaverou/pen/RmwzKv