cssを使用して私のツイートにカーソルを合わせている間に返信とリツイートアイコンを表示したい。cssでホバー効果を使用して返信アイコンとリトライアイコンを表示するにはどうすればよいですか？
ul.statuses li:hover {
background-color:#F7F7F7;
display: inherit;
}
ただし、同じツイートテキストにホバー効果を使用してアイコンを表示することはできません。シングルツイートの背景色とアイコンの両方を表示するにはどうすればいいですか？
で画像を表示するためにCSSを使用することができ、私は、コードを使用してホバー効果のアイコンを表示することができています：
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のブートストラップを使用してアイコンを作成し、「ボタン」クラスに配置しました。
お返事ありがとうございました！代わりにあなたのフロントエンドの間隔を変更することができ、表示プロパティを使用しての
ul.statuses li:hover {
background-color:#F7F7F7;
display: inherit;
content: url(/img.gif)
}
あなたは、コンテンツの属性
、DOMの変化に応じて、試してみてください。
ul.statuses li {opacity:0}
ul.statuses li:hover {opacity:1}
この方法では、ユーザーの視点から、効果は同じですが、あなたのDOMはバウンスしません。さらに滑らかにするためにCSSトランジションを追加してみてください。
この効果が見られたサイトはありますか？私はあなたが望むものの例がこの質問に答えるのに役立つと思います。 –
HTMLも含めます。 – iambriansreed
私たちがツイート上にマウスを置くと、特定のツイートの背景色が変わり、右上隅にあるそのツイートの返信、リツイート、お気に入りのアイコンのリンクが表示されます。私はそのような効果を欲しい。 –