gpt4 book ai didi

jquery - 防止文本在声纳效果动画中被动画化

转载 作者:太空宇宙 更新时间:2023-11-04 11:20:57 24 4
gpt4 key购买 nike

查看我的代码笔:http://codepen.io/Chiz/pen/YypzYx

将鼠标悬停在灰色方 block 上,声纳效果动画就出来了。一切都很好,但是,有没有办法阻止文本(在本例中为“单击”)与声纳效果一起动画化?我希望文字就留在那儿。

为方便起见,这里是代码:

$(".square").on("mouseover", function() {
$(this).children().first().addClass("square-inner");
});

$(".square").on("mouseleave", function() {
$(this).children().first().removeClass("square-inner");
});
/* Prevent scrollbars to appear when waves go out of bound */

.sonar-wrapper {
position: relative;
z-index: 0;
overflow: hidden;
}
.square {
position: relative;
width: 100px;
height: 100px;
background-color: rgb(200, 200, 200);
margin: 5rem auto;
}
.square-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: HSL(45, 100%, 50%);
opacity: 0;
z-index: -1;
pointer-events: none;
animation: sonarWave 2s linear infinite;
}
@keyframes sonarWave {
from {
opacity: 0.4;
}
to {
transform: scale(3);
opacity: 0;
}
}
div {
text-decoration: none;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sonar-wrapper">
<div class="square">
<div><a href="#">Click</a>
</div>
</div>
</div>

谢谢!

最佳答案

只需移动<a> div 之外的元素:

<div class="sonar-wrapper">
<div class="square">
<div></div>
<a href="#">Click</a>
</div>
</div>

Demo .在这种情况下, anchor 元素将保持不变。

关于jquery - 防止文本在声纳效果动画中被动画化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32786520/

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