ホバー上の遅延表示ボタン

Question

特定の日の異なる時間セグメントを示す角度コードがあります。カーソルが2秒間表示されると、セグメント上に削除ボタンが表示されます。私はいくつかの異なるものを試してみましたが、私はそれが

.delete-button { 
 
    display: none; 
 
    transition: all 3s ease; 
 
} 
 
     
 
.time-segment:hover .delete-button{ 
 
    display: block; 
 
    transition-delay: 3s; 
 
}

<button class="delete-button">delete</button>

Answer 1

CSS「表示」プロパティがアニメーション可能ではない作業を得るように見えることはできません。純粋にCSSを使用したい場合は、可視性を使用する必要があります。多くの人が不透明度と可視性の両方でトランジションを設定し、不透明度の後ろには視認性が若干遅れているため、視覚的にぼかして表示されます。

Answer 2

ここで、あなたのCSSが動作するには、削除ボタンがあなたのタイムセグメントにある必要があります。これは純粋なCSSで行うことができますが、少なくとも親divを知っていなければなりません。そうでなければ、各セグメントに対して1つの削除が必要です。

複数のセグメントがあり、特定のオンを削除したい場合は、多分javascriptがもっとフレンドリーになるでしょう。それは、モバイルデバイス上で動作しますどのように

.delete-button { 
 
    opacity : 0.2; 
 
} 
 
     
 
.time-segment:hover .delete-button{ 
 
    opacity: 1; 
 
    transition: opacity 3s cubic-bezier(1,0,1,0); 
 
}

<div class="time-segment"> 
 
    hover me 
 
    <button class="delete-button">delete</button> 
 
</div>