How to hide / show icon with :hover

Question

This is exactly what I want to do

And this is my code

img.info-societe {
    cursor: pointer;
    display: none;
}
img.info-societe:hover {
    display: inline;
}

Why doesn't it work? What's the best solution?

Answer 1

I think you need something like this:

tr {
  cursor: pointer;
}

tr img.info-societe {
  display: none;
}

tr:hover img.info-societe {
  display: inline-block;
}

Answer 2

You should use the opacity property instead of display.

img.info-societe {
   cursor: pointer;
   opacity: 0;
}
img.info-societe:hover {
   opacity: 1;
}