Bolehkah JavaScript Benar-benar Mensimulasikan Kesan CSS :hover Tanpa Interaksi Tetikus?

Mensimulasikan Kesan Hover CSS melalui JavaScript

Soalan:

Adakah mungkin menggunakan JavaScript tulen untuk meniru CSS Kesan ":hover", mengaktifkan peraturan CSS yang berkaitan tanpa benar-benar mencetuskan tetikus acara?

Masalah yang Dihadapi:

• Walaupun menambah pendengar acara alih tetikus, pengisytiharan tuding CSS tetap tidak aktif.
• Mencuba untuk menambah secara manual kelas "legar" melalui JavaScript (cth., theElement.classList.add("hover")) tidak mencetuskan kesan visual yang diingini.

Jawapan:

Malangnya, mensimulasikan peristiwa alih tetikus sebenar dalam JavaScript tulen tidak dapat dilaksanakan kerana sifat yang dipercayai acara.

Dalam pelayar web, acara tertentu, seperti yang dicetuskan oleh interaksi pengguna, dianggap dipercayai. Sebaliknya, peristiwa yang dijana oleh JavaScript, seperti yang anda cuba simulasikan, adalah tidak dipercayai. Peristiwa yang tidak dipercayai tidak boleh melakukan tindakan tertentu, termasuk mencetuskan tindakan lalai untuk kebanyakan elemen HTML (seperti kesan lekukan).

Penyelesaian:

Satu-satunya pilihan yang berdaya maju ialah secara manual uruskan kesan tuding dengan menambah dan mengalih keluar kelas pada elemen sasaran masing-masing menggunakan pendengar acara alih tetikus dan keluar tetikus. Berikut ialah contoh:

const hoverElement = document.querySelector("selector");

hoverElement.addEventListener("mouseover", () => {
  hoverElement.classList.add("hover");
});

hoverElement.addEventListener("mouseout", () => {
  hoverElement.classList.remove("hover");
});

Atas ialah kandungan terperinci Bolehkah JavaScript Benar-benar Mensimulasikan Kesan CSS :hover Tanpa Interaksi Tetikus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!