gpt4 book ai didi

javascript - 使用 JavaScript 触发 CSS 过渡

转载 作者:行者123 更新时间:2023-11-29 17:58:34 27 4
gpt4 key购买 nike

<分区>

我正在学习 JavaScript,这里遇到了一个简单的问题:当另一个元素仅通过 JavaSript 悬停时,我想触发 CSS 动画(旋转蓝色螺母)。

这是我到目前为止所得到的,我不知道我在这个片段中遗漏了什么:

$('#menu').hover(
function () {
$('#nut').addClass('spin');
},
function () {
$('#nut').removeClass('spin');
}
);
#nut {
transform-origin: center center;
transform-style: preserve-3D;
transition: all 1s ease;
}

.spin {
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="menu" x="0px" y="0px" width="71.39px" height="71.39px" viewBox="0 0 71.39 71.39" enable-background="new 0 0 71.39 71.39" xml:space="preserve">
<polygon id="nut" fill="#0000ff" points="66.605,53.541 35.694,71.388 4.784,53.541 4.784,17.849 35.694,0.002 66.605,17.849"/>
</svg>

非常感谢您的帮助!提前致谢!

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