私のブログ アプリでは、フロント ページが読み込まれると、Twitter の共有ボタン (ブログ投稿ごとに 1 つ) がフェードアウトするようにします (これにより、ユーザーはそこにあることがわかりますが、長い間レイアウトから気を散らされることはありません)。ユーザーが投稿にカーソルを合わせると、共有ボタンがフェードインし、ホバーを外すと再びフェードアウトします。
現在、ページの読み込み時に Jquery を使用してフェードアウトしていますが、問題なく動作しています。
jQuery ->
$('.t-share').fadeOut(6800)
ただし、CSSを使用してホバー/アンホバーでフェードイン/フェードアウトすることはできません。これは奇妙です。なぜなら、ユーザーが投稿にカーソルを合わせたり、カーソルを離したりすると表示/非表示になるリンクが他にもいくつかあるからです。これは、css トランジションで実装しました。ただし、divに同じことをさせようとすると、うまくいき.t-share
ません。ボタンのdisplay: none;
プロパティは変更されませんが、フェードインするはずの他の要素は変更されます。
また、ボタンがフェードアウトしているときに div にカーソルを合わせると (6 秒かかります)、CSS トランジションが行われているのがわかります (境界線も追加されます) が、フェードし続けます。
CSSは次のとおりです。
&:hover {
.t-share {
display:inline-block;
position:absolute;
right:8px;
top:8px;
border:2px solid red;
}
JS はどういうわけか CSS トランジションを無効にしましたか?
Jqueryがロード時にボタンをフェードアウトした後、CSSを使用してホバー/アンホバーでボタンをフェードイン/フェードアウトするにはどうすればよいですか?
不可能な場合、JS ソリューションは何ですか?