:interest-target

Cú pháp

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

Ví dụ

Chọn phần tử đích liên kết với interest invoker

Trong ví dụ này, chúng ta minh họa cách dùng :interest-target để áp dụng kiểu cho phần tử đích của interest invoker khi người dùng thể hiện sự quan tâm tới invoker.

HTML

Đoạn markup bao gồm một <button> và một <p>. Chúng ta chỉ định <button> là interest invoker bằng cách gán thuộc tính interestfor có giá trị khớp với id của phần tử <p>, khiến đoạn văn trở thành phần tử đích.

<button interestfor="mytarget">Button</button>
<p id="mytarget">A paragraph</p>

CSS

Trong CSS, chúng ta chỉ định một quy tắc với bộ chọn :interest-target, áp dụng một tập hợp kiểu cụ thể cho phần tử <p> khi người dùng thể hiện sự quan tâm tới <button>. Một số kiểu khác được áp dụng cho <button> đã được ẩn để ngắn gọn.

body {
  margin: 10px;
}

button {
  padding: 5px 10px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  background-color: #eeeeee;

  cursor: pointer;
}

p:interest-target {
  font-size: 1.5em;
  font-family: sans-serif;
  padding: 10px;
  background-color: hotpink;
  color: purple;
}

Kết quả

Kết quả hiển thị như sau:

Hãy thử thể hiện sự quan tâm tới nút (ví dụ bằng cách di chuột hoặc focus vào nó), và chú ý cách điều này khiến các kiểu hiển thị trước đó được áp dụng cho đoạn văn.

Đặc tả

Tương thích trình duyệt

Xem thêm

• :interest-source
• Popover API
• Using interest invokers
• Module CSS selectors