英文:
In Svelte, how to apply a class on hover without the CSS :hover?
问题
在我的情况下，我想在悬停时应用动画效果，但为了简化CSS，我想在悬停时应用一个带有动画效果的类，而不是编写新的带有:hover的CSS。
英文:
In my case, I would like to apply animations on hover but to simplify the CSS I wanted to apply a class with the animations on hover instead of writing new CSS with :hover.
答案1
得分: 1
将我找到的解决方案是在悬停时组合变量和函数以动态应用类：
<script>
let isHovered = false;
</script>
<div class:class-on-hover={isHovered} on:mouseover={() => isHovered = true} on:mouseout={() => isHovered = false}>
Hover me!
</div>
<style>
.class-on-hover {
color: red;
}
</style>
英文:
A solution I found was to combine a variable and functions on hover to dynamically apply the class
<script>
let isHovered = false;
</script>
<div class:class-on-hover={isHovered} on:mouseover={() => isHovered = true} on:mouseout={() => isHovered = false}>
Hover me!
</div>
<style>
.class-on-hover {
color: red;
}
</style>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论