#鼠标悬停时的 JS 元素 - Javascript

##介绍

在 Javascript 中，我们可以通过 onmouseover 和 onmouseout 事件来实现鼠标悬停时改变元素的样式或触发某个动作。这两个事件常常被用于创建交互式的网页元素，使其更加用户友好。

##使用方法

###1. 改变元素的样式

当鼠标悬停在元素上时，我们可以通过修改元素的样式来让用户知道该元素可以进行交互操作。

首先，需要在 HTML 中为需要修改样式的元素添加 class 属性。然后，使用 Javascript 中的 onmouseover 和 onmouseout 事件来分别添加和移除该元素的 class，从而改变其样式。

// HTML
<div class="my-element">悬停我试试</div>

// CSS
.my-element {
  background-color: gray;
  color: white;
}

// Javascript
const element = document.querySelector('.my-element');

element.onmouseover = function() {
  element.classList.add('highlight');
}

element.onmouseout = function() {
  element.classList.remove('highlight');
}

在上面的代码中，我们为 .my-element 元素添加了 highlight 类，并在鼠标悬停时添加该类以改变其背景颜色和字体颜色。

###2. 触发某个动作

当鼠标悬停在元素上时，我们还可以触发某个动作，例如显示一个弹出窗口或者隐藏一个菜单。

对于这种情况，我们可以在 onmouseover 事件中添加需要触发的动作，然后在 onmouseout 事件中将其取消。

// HTML
<div class="my-element">悬停我试试</div>

// CSS
.my-element {
  border: 1px solid black;
  padding: 10px;
  display: none;
}

// Javascript
const element = document.querySelector('.my-element');

element.onmouseover = function() {
  element.style.display = 'block';
}

element.onmouseout = function() {
  element.style.display = 'none';
}

在上面的代码中，我们为 .my-element 元素添加了一个边框，并在默认情况下隐藏它。当鼠标悬停在该元素上时，我们将其样式的 display 属性设置为 block，从而触发该元素的显示；当鼠标移出元素后，我们将其样式的 display 属性设置为 none，从而隐藏该元素。

##结论

通过使用 Javascript 中的 onmouseover 和 onmouseout 事件，我们可以非常方便地实现交互式的网页元素，提高用户的体验感。同时，我们也可以根据需要在这两个事件中添加需要的代码，从而实现更复杂的功能。