我如何才能僅將懸停過渡應用于 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 width="100%" height="100%" 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>uj5u.com熱心網友回復：
為此，您需要打破 2 個路徑：圓圈和 4 個扇區。在代碼示例中，基圓填充為黃色，4 個扇區填充為紅色。
接下來我在 2 條路徑之間畫一個圓圈（黑色填充）。該圓圈僅在 4 個扇區下方可見。
在懸停時，您需要更改此圓圈的顏色：
circle:hover{fill:green} <svg width="100%" height="100%" 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/359347.html
標籤：css svg 小路 徘徊 css-transitions
上一篇：SVG：相對于其他組的位置組