Show html on hover event

help
1

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

normal state:

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

on hover:

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

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

Are there any other/better approaches?

2

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

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

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

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 )