:interest-source 擬似クラス (CSS)

構文

:interest-source {
  /* ... */
}

例

関心インボーカー要素の選択

この例では、:interest-source を使用して、関心対象の呼び出し要素に関心が示された際に、その要素にスタイルを適用する方法を示します。

HTML

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

<button interestfor="mypopover">ボタン</button>
<p id="mypopover" popover>ホバーツールチップ</p>

CSS

CSS では、:interest-source セレクターを使用したルールを指定し、<button> に対して関心が示された際に、background-color と color の特定の組み合わせを適用するようにしています。また、<button> にはそれ以外にもいくつかのスタイルを適用していますが、説明を簡潔にするため、ここでは省略しています。

button {
  margin: 10px;
  padding: 5px 10px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  font-size: 1.5em;
  background-color: #eeeeee;

  cursor: pointer;
}

button:interest-source {
  background-color: hotpink;
  color: purple;
}

結果

これは、次のように表示されます。

そのボタンに関心を示してみてください（例えば、カーソルを合わせたり、フォーカスを当てたりするなど）。そうすると、関心を示したときのみ、hotpink と purple の色の組み合わせが適用されることがわかります。

仕様書

ブラウザーの互換性

関連情報

• :interest-target
• ポップオーバー API
• 関心インボーカーの使用
• CSS セレクターモジュール