recherche

Maison >interface Web >Questions et réponses frontales >Comment implémenter la fonction de survol JavaScript en HTML

Comment implémenter la fonction de survol JavaScript en HTML

PHPz
PHPzoriginal
2023-04-25 10:46:411781parcourir

La fonction de survol JavaScript signifie que lorsque le pointeur de la souris survole un élément, vous pouvez effectuer des opérations spécifiées, telles que l'affichage d'informations d'invite, la modification du style de l'élément, etc. Cette fonctionnalité est très courante dans la conception Web et peut offrir aux utilisateurs une meilleure expérience interactive. Pour implémenter la fonctionnalité de survol JavaScript en HTML, vous pouvez suivre les étapes ci-dessous.

Première étape : Écrire du code HTML

Tout d'abord, vous devez écrire du code HTML de base, y compris les éléments nécessaires à l'implémentation de la fonction de survol. Par exemple, nous pouvons créer un simple élément div comme suit : 

<div id="myDiv">这是一个 div 元素</div>

Étape 2 : Ajouter du code JavaScript

Ensuite, vous devez ajouter du code JavaScript pour implémenter la fonction de survol. Vous pouvez placer le code JavaScript dans l'élément head du fichier HTML ou le placer dans un fichier .js externe, puis le référencer. Par exemple, ce qui suit est un simple code JavaScript : 

const myDiv = document.getElementById("myDiv");
myDiv.addEventListener("mouseover", function() {
  myDiv.style.backgroundColor = "red";
});

myDiv.addEventListener("mouseout", function() {
  myDiv.style.backgroundColor = "white";
});

Ce code obtient d'abord l'élément avec l'identifiant "myDiv" via la méthode document.getElementById("myDiv") . Ensuite, ajoutez deux écouteurs d'événements à l'élément via la méthode addEventListener(). Le premier écouteur est mouseover, qui représente l'événement qui est déclenché lorsque le pointeur de la souris survole l'élément. Lorsque l'événement est déclenché, nous pouvons définir la couleur d'arrière-plan de l'élément sur rouge via la méthode style.backgroundColor. Le deuxième écouteur est mouseout, qui représente l'événement déclenché lorsque le pointeur de la souris quitte l'élément. Lorsque l'événement se déclenche, nous pouvons réinitialiser la couleur d'arrière-plan au blanc. document.getElementById("myDiv") 方法获取到 id 为 "myDiv" 的元素。然后，通过 addEventListener() 方法为该元素添加两个事件监听器。第一个监听器是 mouseover，表示当鼠标指针悬停在该元素上方时触发的事件。当事件触发时，我们可以通过 style.backgroundColor 方法设置该元素的背景色为红色。第二个监听器是 mouseout，表示当鼠标指针离开该元素时触发的事件。当事件触发时，我们可以将背景色重新设置为白色。

这段代码的效果是，在鼠标指针悬停在该 div 元素上时，其背景色变成红色，鼠标指针离开时背景色恢复为白色。

第三步：调用 JavaScript 代码

最后，需要将 JavaScript 代码与 HTML 页面连接起来，以让 hover 功能生效。可以通过以下方式调用 JavaScript 代码：

  • 将 JavaScript 代码直接放在 HTML 页面的