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

【问题标题】：How to show reply and retweet icons using hover effect with css?如何使用带有 css 的悬停效果显示回复和转发图标？
【发布时间】：2012-11-16 16:12:15
【问题描述】：

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

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

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

【问题讨论】：

是否有网站在使用中看到过这种效果？我认为您想要的示例将有助于回答这个问题。
就像在 Twitter 中，当我们将鼠标悬停在一条推文上时，该特定推文的背景颜色会发生变化，并在右上角显示该推文的回复、转发和收藏图标链接。我想要这样的效果。

标签： css hover

【解决方案1】：

我可以使用代码显示带有悬停效果的图标：

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

显示虚拟推文悬停效果的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 bootstrap 创建了图标并将其放在“按钮”类中。

感谢你们的快速回复！

【讨论】：

【解决方案2】：

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

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

https://developer.mozilla.org/en/CSS/content

【讨论】：

IE6 或 IE7 不支持内容属性。虽然它们正在被逐步淘汰。
是的，这是真的..不久之后，再也没有人需要再次输入 IE6..muhahahah 但是，OP 并没有将其指定为问题

【解决方案3】：

不要使用 display 属性，它可能会随着 DOM 的变化而改变前端的间距，尝试：

ul.statuses li {opacity:0}

ul.statuses li:hover {opacity:1}

这样，从用户的角度来看，效果是一样的，但您的 DOM 不会四处弹跳。尝试添加 CSS 过渡以使其更加平滑。

【讨论】：