:interest-source

Cú pháp

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

Ví dụ

Chọn phần tử interest invoker

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

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. Đoạn văn được chuyển thành popover bằng cách gán thuộc tính popover, giúp ẩn nó ban đầu.

<button interestfor="mypopover">Button</button>
<p id="mypopover" popover>A hover tooltip</p>

CSS

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

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;
}

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 tổ hợp màu hotpink và purple chỉ được áp dụng khi có sự quan tâm.

Đặc tả

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

Xem thêm

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