Show html on hover event

I want to show an icon when the cursor is hovering over a list item.

normal state:

  {{#each types}}
  <li class="type">{{name}}</li>

on hover:

  {{#each types}}
  <li class="type">{{name}} <i class="fa fa-wrench"></i></li>

I was thinking of creating a hidden class and removing/adding it on event mouseenter.

Are there any other/better approaches?

Can’t you just achieve this with :hover in CSS?

.type:hover::after { content: "\f0ad"; font-family: fontawesome;}

    <li><div class="type">Field1</div> </li>
    <li><div class="type">Field2</div> </li>
    <li><div class="type">Field3</div> </li>
1 Like

nice, thanks a lot!

is there a way to handle a click event on content that was inserted like this?

(I already have a different event on .type )