0

cssを使用してツイートにカーソルを合わせながら、返信アイコンとリツイートアイコンを表示したい。コードを使用して背景色を変更できるようになりました：

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

ただし、同じツイートテキストにホバー効果を使用してアイコンを表示することはできません。1つのツイートの背景色とアイコンの両方を変更する方法を教えてください。

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ブートストラップを使用してアイコンを作成し、「buttons」クラスに配置しました。

迅速な対応をありがとう！

于 2012-04-27T03:14:19.710 に答える
0

DOM の変更に伴い、フロント エンドの間隔が変更される可能性がある display プロパティを使用する代わりに、次のことを試してください。

ul.statuses li {opacity:0}

ul.statuses li:hover {opacity:1}

この方法では、ユーザーの観点からの効果は同じですが、DOM が跳ね返ることはありません。CSS トランジションを追加して、さらにスムーズにしてみてください。

于 2012-11-16T08:12:15.033 に答える
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 に答える