1. 什么是HTML鼠标悬停？学会这些技巧，让你的网站更具互动性 2. HTML鼠标悬停——为什么你的网站缺少它就不够酷？ 3. 如何实现HTML鼠标悬停功能？这6个实例一定帮到你 4. 不要忽略了H

2024-04-16 20:07:44 搜狗SEO ℃

```html

HTML鼠标悬停

（图片来源网络，侵删）

简介

HTML鼠标悬停是指在网页中，当鼠标指针悬停在某一元素上时，触发某种效果或行为，常见的鼠标悬停效果包括改变元素的颜色、显示隐藏的内容等，在HTML中，我们可以通过CSS和JavaScript来实现鼠标悬停效果。

CSS实现鼠标悬停

方法一：使用伪类选择器

1、使用:hover伪类选择器，为元素添加鼠标悬停样式。

<!DOCTYPE html><html><head><style>  .box {    width: 100px;    height: 100px;    backgroundcolor: red;  }  .box:hover {    backgroundcolor: blue;  }</style></head><body>  <div class="box"></div></body></html>

方法二：使用mouseover和mouseout事件

1、为元素添加mouseover和mouseout事件监听器，分别设置元素的样式。

<!DOCTYPE html><html><head><style>  .box {    width: 100px;    height: 100px;    backgroundcolor: red;  }</style><script>  function mouseOver() {    this.style.backgroundColor = 'blue';  }  function mouseOut() {    this.style.backgroundColor = 'red';  }</script></head><body>  <div class="box" onmouseover="mouseOver()" onmouseout="mouseOut()"></div></body></html>

JavaScript实现鼠标悬停

方法一：使用addEventListener

1、为元素添加mouseenter和mouseleave事件监听器，分别设置元素的样式。

<!DOCTYPE html><html><head><style>  .box {    width: 100px;    height: 100px;    backgroundcolor: red;  }</style><script>  const box = document.querySelector('.box');  box.addEventListener('mouseenter', () => {    box.style.backgroundColor = 'blue';  });  box.addEventListener('mouseleave', () => {    box.style.backgroundColor = 'red';  });</script></head><body>  <div class="box"></div></body></html>

方法二：使用onmouseenter和onmouseleave属性

1、为元素添加onmouseenter和onmouseleave属性，分别设置元素的样式。

<!DOCTYPE html><html><head><style>  .box {    width: 100px;    height: 100px;    backgroundcolor: red;  }</style><script>  function mouseEnter() {    this.style.backgroundColor = 'blue';  }  function mouseLeave() {    this.style.backgroundColor = 'red';  }</script></head><body>  <div class="box" onmouseenter="mouseEnter()" onmouseleave="mouseLeave()"></div></body></html>