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

代码中,我们首先在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>

相关推荐
DanB241 分钟前
html复习
javascript·microsoft·html
汉得数字平台6 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹12 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
Andy杨1 小时前
20250718-5-Kubernetes 调度-Pod对象:重启策略+健康检查_笔记
笔记·容器·kubernetes
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
杭州杭州杭州7 小时前
Python笔记
开发语言·笔记·python
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化