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>

相关推荐
天水幼麟23 分钟前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
小小小小宇1 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊1 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习2 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
天水幼麟3 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
绿皮的猪猪侠3 小时前
算法笔记上机训练实战指南刷题
笔记·算法·pta·上机·浙大
沧海一笑-dj3 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js