1

私のブログ アプリでは、フロント ページが読み込まれると、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 ソリューションは何ですか?

4

1 に答える 1

0

フェードアウト関数が完全にフェードアウトしたときに.t-shareto を設定するため、css トランジションが機能しない可能性があります(機能するかどうかはわかりません)。display: noneあなたはそれをテストしたいかもしれません。

それまでの間、100% JS を使用できます。ただし、これは純粋なCSSを使用していません...

$('.t-share')
  .mouseenter(function(){ $(this).fadeIn(200); })
  .mouseleave(function(){ $(this).fadeOut(200); })
  .fadeOut(6800);
于 2012-04-16T23:02:09.357 に答える