Computer >> Máy Tính >  >> Lập trình >> Javascript

Hiển thị phần tử khi chuột vào nó, với JavaScript

Giả sử bạn có một phần tử ẩn (như thanh tác vụ / menu) mà bạn muốn hiển thị khi chuột của người dùng vào khu vực đó. Chúng tôi có thể làm điều đó bằng cách thiết lập một sự kiện JavaScript mouseenter.

Hiển thị phần tử khi chuột vào nó, với JavaScript

Cách thực hiện:

Đánh dấu HTML

Thêm mã HTML sau vào trình soạn thảo yêu thích của bạn (để trực tuyến, tôi khuyên bạn nên dùng CodePen. 

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

Kiểu CSS

Thêm CSS sau vào biểu định kiểu của bạn:

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

Lưu ý rằng .invisible-box lớp có opacity: 0; có nghĩa là nó bị ẩn theo mặc định. Ngay bên dưới chúng ta có một lớp tiện ích .opacity-1 mà chúng tôi sẽ sử dụng để hiển thị lại phần tử bằng JavaScript.

Sự kiện trình di chuột JavaScript

Thêm mã sau vào tập lệnh JS của bạn:

let invisibleBox = document.querySelector(".invisible-box")

function addFullOpacity() {
  invisibleBox.classList.add("opacity-1")
}

invisibleBox.addEventListener("mouseenter", addFullOpacity)

Cách mã JavaScript hoạt động

  • Đầu tiên, chúng tôi sử dụng querySelector() để tìm và lấy .invisible-box . Sau đó, chúng tôi gán nó cho một biến có tên phù hợp:invisibleBox .
  • Sau đó, chúng tôi thiết lập một khai báo hàm và đặt tên cho nó là addFullOpacity() . Bên trong phần thân của nó {..} chúng tôi thêm một tuyên bố .
  • Câu lệnh đính kèm add() của thuộc tính classList vào hộp ẩn của chúng tôi - và thêm opacity-1 lớp thành phần tử hộp vô hình của chúng tôi.
  • Cuối cùng, chúng tôi thiết lập addEventListener() và cung cấp cho nó hai đối số. Đối số đầu tiên lắng nghe mouseenter biến cố. Đối số thứ hai là gọi addFullOpacity() mà chúng tôi đã tạo ở trên (vì soonas nó đăng ký một sự kiện mouseenter).

di chuột qua so với di chuột qua?

Bạn có thể nhận thấy rằng cũng có một loại sự kiện được gọi là di chuột qua - nó khác với mouseenter như thế nào?

Sự khác biệt chính là:

  • Di chuột qua sự kiện sẽ kích hoạt mỗi khi con chuột của người dùng di chuyển qua phần tử mẹ hoặc một trong các phần tử con của nó. Nó sẽ tiếp tục kích hoạt nếu bạn tiếp tục di chuyển trở lại và yếu tố thứ tư - có thể tốn kém, hiệu quả khôn ngoan.
  • Sự kiện di chuột kích hoạt chỉ khi chuột vào phần tử cha đích - nó không quan tâm đến phần tử con của nó. :-(

Bạn muốn sử dụng di chuột qua nếu bạn có một thành phần web chứa các tính năng khác nhau mà bạn muốn hoạt động khác khi người dùng tương tác với chúng. Nếu không, hãy dính vào mouseenter vì nó tốt hơn cho hiệu suất.

Tài nguyên

  • CodePen với tất cả mã.
  • Trung tâm di chuột của Tài liệu Web MDN