javascript - In Svelte, how to apply a class on hover without the CSS :hover? - Stack Overflow

admin管理员组

文章数量:1392007

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.

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.

• javascript
• html
• css
• svelte

Share Improve this question Follow edited Apr 22, 2023 at 11:13 Eli O. asked Apr 19, 2023 at 21:50 Eli O.Eli O. 2,12733 gold badges2828 silver badges3535 bronze badges 1

• What about creating a "helper" CSS class in the svelte file and toggle that class based on your reactive variable? This way, the "hover:" part moves into the helper class. – Florian Commented Jun 4, 2024 at 16:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

A solution I found was to bine 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>

本文标签： javascriptIn sveltehow to apply a class on hover without the CSS hoverStack Overflow