0

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

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

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

4

3 回答 3

2

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

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

感谢您的快速反应家伙！

于 2012-04-27T03:14:19.710 回答
0 
ul.statuses li:hover {
  background-color:#F7F7F7;
  display: inherit;
  content: url(/img.gif)
}

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

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

于 2012-04-23T15:05:45.850 回答
0

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

ul.statuses li {opacity:0}

ul.statuses li:hover {opacity:1}

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

于 2012-11-16T08:12:15.033 回答