buga
buga

Reputation: 1344

add class to element on hover in blazor

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

Upvotes: 3

Views: 10798

Answers (1)

Jcl
Jcl

Reputation: 28272

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

Upvotes: 10

Related Questions