gpt4 book ai didi

:hover but happening on :active 上没有发生 CSS 转换

转载 作者:太空宇宙 更新时间:2023-11-04 08:25:33 25 4
gpt4 key购买 nike

我有一些 SVG 正在尝试制作动画。当我悬停或单击整个 svg 时, children 应该改变颜色。这一切都在起作用。我想在 :hover 和 :active 上设置颜色变化的动画,但结果不一致。单击 SVG 时,动画会运行,但不会悬停。这对我来说似乎很奇怪。

.fillStroke {
fill: #007fa3;
transition: all 0.3s ease;
}

.icon:hover .fillStroke {
stroke: #007fa3;
}

.icon:active .fillStroke {
fill: #333333;
stroke: #333333
}
    <svg id="Layer_1" class='icon' data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.85 15" height='auto' width='100px'>
<title>icon</title>
<g id="_Group_AttachS" data-name="&lt;Group&gt;AttachS">
<path id="fillStroke" class="fillStroke" d="M5,15a4.54,4.54,0,0,1-1.17-.16A5.36,5.36,0,0,1,.14,11.22,3.85,3.85,0,0,1,1.23,7.39L7.33,1A3.18,3.18,0,0,1,12,1.06a3.14,3.14,0,0,1,.1,4.57L6.31,11.38a1.77,1.77,0,0,1-1.74.5,2.06,2.06,0,0,1-1.42-1.4,1.55,1.55,0,0,1,.42-1.54L8.29,4.13l.71.7L4.27,9.64a.55.55,0,0,0-.16.57,1.05,1.05,0,0,0,.71.69.77.77,0,0,0,.78-.24l5.75-5.75a2.12,2.12,0,0,0-.1-3.16A2.18,2.18,0,0,0,8,1.66L1.95,8.09A2.85,2.85,0,0,0,1.1,11a4.39,4.39,0,0,0,3,2.92,3.1,3.1,0,0,0,3.11-.82c3.14-3.14,6.87-6.76,6.91-6.8l.7.72s-3.76,3.65-6.9,6.79A4,4,0,0,1,5,15Z"/>
</g>
</svg>

这是一个指向代码笔的链接,它使我正在尝试做的事情变得非常明显。 https://codepen.io/cameronlewis35/pen/XgLxoP

最佳答案

您不能在关键字属性(如 CodePen 上的 none)和值属性(如 #0016e4)之间转换。如果你想使用一个会翻译的关键字属性,你可以尝试 transparent 因为它在功能上类似于 rgba(0, 0, 0, 0) 并且在两者之间有明确的步骤那和你的目标。

此处示例:https://codepen.io/anon/pen/QgXzBW

关于:hover but happening on :active 上没有发生 CSS 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45199908/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com