interest-delay-end

構文

/* キーワードまたはカスタム値 */
interest-delay-end: normal;
interest-delay-end: 2s;
interest-delay-end: 250ms;

/* グローバル値 */
interest-delay-end: inherit;
interest-delay-end: initial;
interest-delay-end: revert;
interest-delay-end: revert-layer;
interest-delay-end: unset;

値

normal

待ち時間をブラウザーのデフォルトの待ち時間に設定します。これが初期値です。

<time>

待ち時間を特定の時間に設定します。値は正の値でなければならず、そうでない場合、プロパティは無効になります。

公式定義

形式文法

interest-delay-end = 
  normal  |
  <time>  

例

基本的な interest-delay-end 効果の作成

この例では、interest-delay-end が関心インボーカーの動作にどのように影響するかを示します。

HTML

このマークアップには、<button>、<p>、<input> の checkbox 型が含まれています。この <button> 要素を関心インボーカーとして指定するには、interestfor 属性を付与し、その値が <p> 要素の id と一致するよう指定します。これにより、段落が対象要素となります。段落は popover 属性を付与することでポップオーバーに変換され、初期状態では非表示になります。

<button interestfor="mypopover">ボタン</button>
<p id="mypopover" popover>ホバーのツールチップ</p>
<form>
  <input type="checkbox" id="apply-delay" />
  <label for="apply-delay">
    <code>interest-delay-end</code> を <code>2s</code> に適用
  </label>
</form>

CSS

CSS では、.delay セレクターでルールを指定し、delay クラスが設定されたあらゆる関心インボーカーに interest-delay-end 値 2s を適用します。このクラスは、JavaScript を使用してチェックボックスがチェックされた際に <button> に設定します。

.delay {
  interest-delay-end: 2s;
}

JavaScript

スクリプト内で <button> とチェックボックスへの参照を取得し、チェックボックスの値が変更されるたびに（チェックされた時または外された時）、<button> の delay クラスを切り替えるイベントリスナーを作成します。

const btn = document.querySelector("button");
const checkbox = document.querySelector("input");
checkbox.addEventListener("change", () => {
  btn.classList.toggle("delay");
});

結果

これは次のようにレンダリングされます。

ボタンに（ホバーやフォーカスなどで）関心を示してから関心を失う操作を行い、ポップオーバーの表示と非表示を確認してみてください。既定では、ポップオーバーはとても短い待ち時間の後、表示・非表示されます。

これでチェックボックスをオンにして、同じ操作をもう一度試してください。この時点では、関心が示されてからポップオーバーが出現するまでの待ち時間には影響しませんが、関心が失われてからポップオーバーが非表示になるまでには 2s が追加されます。

仕様書

ブラウザーの互換性

関連情報

• interest-delay-start, interest-delay
• ポップオーバー API
• 関心インボーカーの使用
• CSS 基本ユーザーインターフェイスモジュール