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>

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/482735.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。