twitter-bootstrap 如何使用 :hover 隐藏/显示图标

Question

提问by Ahmed Ziani

This is exactly what I want to do enter image description here

这正是我想要做的在此处输入图片说明

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

You should use the opacityproperty instead of display.

您应该使用opacity属性而不是显示。

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

Answer 2

I think you need something like this:

我认为你需要这样的东西：

tr {
  cursor: pointer;
}

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

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