如何使用css的悬停效果显示回复和转发图标？

我想在使用css将鼠标悬停在我的推文上时显示回复和转发图标。我可以使用以下代码更改背景颜色：

ul.statuses li:hover {
        background-color:#F7F7F7;
        display: inherit;
    }

    ul.statuses .buttons{
            display: none;
    }
    ul.statuses li:hover .buttons {
            display: inline-block;
    }

但无法在同一条推文上使用悬停效果显示图标。如何显示单个tweet的更改背景颜色和图标

ul.statuses li:hover {
  background-color:#F7F7F7;
  display: inherit;
  content: url(/img.gif)
}

可以使用css显示具有content属性的图像

---

我能够使用代码显示具有悬停效果的图标：

ul.statuses li:hover {
        background-color:#F7F7F7;
        display: inherit;
    }

    ul.statuses .buttons{
            display: none;
    }
    ul.statuses li:hover .buttons {
            display: inline-block;
    }

显示虚拟tweet悬停效果的html代码是：

<ul id="status" class="statuses">
              <li>Sample tweets. Sample tweets. Sample tweets. Sample tweets. Sample tweets.
              <p id="iconlinks" class="buttons">
                <a href="#" id="reply"><i class="icon-share-alt" title="Reply"></i></a>
            <a href="#" id="retweet"><i class="icon-retweet" title="Retweet"></i></a>
            <a href="#" id="favorite"><i class="icon-star" title="Favorite"></i></a>
            <a href="#" id="mail"><i class="icon-envelope" title="Mail"></i></a>
            <a href="#" id="assign"><i class="icon-user" title="assign"></i></a>
               </p>
                  </li>
                  <li>Sample tweets. Sample tweets. Sample tweets. 
                    <p id="iconlinks" class="buttons">
                      <a href="#" id="reply"><i class="icon-share-alt" title="Reply"></i></a>
                      <a href="#" id="retweet"><i class="icon-retweet" title="Retweet"></i></a>
          <a href="#" id="favorite"><i class="icon-star" title="Favorite"></i></a>
                      <a href="#" id="mail"><i class="icon-envelope" title="Mail"></i></a>
                      <a href="#" id="assign"><i class="icon-user" title="assign"></i></a>
                  </p>
                  </li>
                </ul>

示例推文。示例推文。示例推文。示例推文。示例推文。



示例推文。示例推文。示例推文。

我已经使用twitter引导创建了图标，并将其放在“buttons”类中

---

谢谢你们的快速反应，伙计们

不要使用“显示”属性，该属性可能会随着DOM的变化而改变前端的间距，请尝试：

ul.statuses li {opacity:0}

ul.statuses li:hover {opacity:1}

---

这样，从用户的角度来看效果是相同的，但是您的DOM不会反弹。尝试添加CSS转换，使其更加平滑。

有没有网站在使用中看到这种效果？我想举一个你想要什么的例子可以帮助回答这个问题。就像在twitter上，当我们将鼠标移到一条推文上时，该推文的背景颜色会发生变化，并在右上角显示该推文的回复、转发和最喜爱的图标链接。我想要这样的效果。IE6或IE7不支持Content属性。虽然它们正在被淘汰。是的，这是真的。不久的将来，没有人会再需要输入IE6了。哈哈哈，不过，OP并没有把它列为一个问题