HTML鼠标悬停

来源：恒创科技编辑：恒创科技编辑部

2024-04-16 18:00:31

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.henghost.com/jishu/53956/