HTML中使用JavaScript实现一个简单的鼠标悬停特效。

YCY^v^

已于 2023-12-09 10:15:50 修改

阅读量2.4k

点赞数 14

分类专栏：前端文章标签：笔记 html 前端

于 2023-11-29 11:41:27 首次发布

本文链接：https://blog.csdn.net/chenyu_Yang/article/details/134686190

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码中，我们首先在CSS中定义了一个红色的方块，然后使用:hover伪类定义了鼠标悬停时的样式。接着，在JavaScript中定义了一个函数showMessage()，用于在控制台输出一条消息。最后，在HTML中使用<div>标签定义了一个id为myDiv的红色方块，并在onmouseover事件中调用了showMessage()函数。


<!DOCTYPE html>

<html>

<head>

 <title>HTML特效演示</title>

 <style>

  /* 定义悬停前和悬停后的样式 */

  #myDiv {

   width: 100px;

   height: 100px;

   background-color: red;

  }

  #myDiv:hover {

   background-color: blue;

  }

 </style>

 <script>

  // 定义JavaScript函数，用于在控制台输出一条消息

  function showMessage() {

   console.log("鼠标悬停在红色方块上！");

  }

 </script>

</head>

<body>

 <!-- 在HTML中定义一个红色的方块 -->

 <div id="myDiv" onmouseover="showMessage()"></div>

</body>

</html>

关注博主即可阅读全文