0
点赞
收藏
分享

微信扫一扫

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

月半小夜曲_ 2023-11-30 阅读 31

 

代码中,我们首先在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" οnmοuseοver="showMessage()"></div>

</body>

</html>

 

 

举报

相关推荐

0 条评论