HTML中使用JavaScript实现一个简单的鼠标悬停特效。
- IT业界
- 2025-07-21 19:19:11
代码中，我们首先在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>
HTML中使用JavaScript实现一个简单的鼠标悬停特效。由讯客互联IT业界栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“HTML中使用JavaScript实现一个简单的鼠标悬停特效。”
