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

Question

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

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

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

Answer 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 创建了图标，并将其放置在“按钮”类中。

感谢您的快速回复!