How to make an icon visible only if it is hovered in angular 10-CodePudding

I've just started working on Angular and I don't know most of the concepts as for now.

I have to make an icon visible only when it is hovered over. How can I do this, please help me.

Apologies, I can't provide the code due to company policies

The icons are for sorting and it sorting function working fine as for now.

Have to make these icons visible when it is hovered over.

Please help

CodePudding user response：

This is not an Angular question imho. I would just handle this with plain CSS.

Supposing that you don't want the content to be shifted when the icon appears, I would just hide it with a opacity: 0

Then when the user hovers it, set opacity: 1

HTML :

<div>
  <span id="iconContainer">☺</span>
  Blabla
</div>

CSS :

#iconContainer {
  opacity: 0;
}

#iconContainer:hover {
  opacity: 1;
}