add class to element on hover in blazor

Question

Note I can't just use CSS :hover because I'll also need to modify the class property on these elements based on keydown on a different element, and even if the mouse is still hovering it could loose the class until the mousemove happens again.

So having a list like this:

<ul>
<li> item1 </li>
...
</ul>

I need to add a class to li tag when only when mousemove triggers on it

is this possible with blazor ? or only with jsinterop

Answer 1

Use the @onmouseover and @onmouseout events

<li class="@MyClass" @onmouseover="MouseOver" @onmouseout="MouseOut">

@code {
  string MyClass { get; set; }
  void MouseOver(MouseEventArgs e) { MyClass="over"; }
  void MouseOut(MouseEventArgs e) { MyClass=""; }
}

You can combine the MyClass property however you wish with the other events