Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Hiện Element Khi Chuột Di Vào, Với JavaScript

Giả sử bạn có element vô hình (như action bar/menu) muốn hiện khi chuột user vào khu vực đó. Làm được bằng cách thiết lập event mouseenter của JavaScript.

Hiện Element Khi Chuột Di Vào, Với JavaScript

Cách làm:

HTML markup

Thêm HTML sau vào editor yêu thích (online khuyên CodePen).

<div class="invisible-box">Yay you can see me!</div>

CSS styling

Thêm CSS sau vào stylesheet:

.invisible-box { opacity: 0; transition: all 500ms; padding: 32px; margin-top: 32px; margin-bottom: 32px; background-color: #cf4b32; color: #fff; text-align: center; } .opacity-1 { opacity: 1; }

Chú ý class .invisible-box có opacity: 0; ẩn mặc định. Dưới có utility class .opacity-1 dùng hiện element lại với JavaScript.

Event mouseenter JavaScript

Thêm mã sau vào JS script:

let invisibleBox = document.querySelector(".invisible-box") function addFullOpacity() { invisibleBox.classList.add("opacity-1") } invisibleBox.addEventListener("mouseenter", addFullOpacity)

Cách code JavaScript hoạt động

  • Dùng querySelector() tìm và lấy .invisible-box. Gán cho biến tên phù hợp: invisibleBox.
  • Thiết lập function declaration tên addFullOpacity(). Bên trong body {..} thêm statement.
  • Statement gắn phương thức add() của classList property cho invisible box — thêm class opacity-1 cho element invisible box.
  • Cuối, thiết lập addEventListener() hai argument. Argument đầu lắng nghe event mouseenter. Argument thứ hai gọi function addFullOpacity() tạo ở trên (ngay khi đăng ký mouseenter event).

mouseenter vs mouseover?

Bạn thấy cũng có event type mouseover — khác biệt với mouseenter như thế nào?

Khác biệt chính:

  • mouseover trigger mỗi lần chuột user di qua parent element HOẶC bất kỳ child elements. Trigger liên tục nếu di chuyển qua lại các element — tốn hiệu năng.
  • mouseenter trigger chỉ khi chuột vào target parent element — không quan tâm children. :-(

Dùng mouseover nếu web component có nhiều feature muốn hành xử khác nhau khi user tương tác. Ngược lại dùng mouseenter vì tốt cho performance.

Tài nguyên