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>

相关推荐
西西学代码1 分钟前
Flutter---坐标网格图标
前端·javascript·flutter
用户21411832636022 分钟前
假期值班,困在形式主义里的“假坚守”
前端
需要兼职养活自己7 分钟前
react【portals】与vue3【<Teleport>】
前端·react.js
用户47949283569158 分钟前
React 19.2 重磅更新:终于解决 useEffect 依赖数组难题
前端·react.js
梦里小白龙14 分钟前
前端视频课程添加水印,全屏不消失解决方法
前端·音视频
我命由我1234519 分钟前
PDFBox - PDDocument 与 byte 数组、PDF 加密
java·服务器·前端·后端·学习·java-ee·pdf
@PHARAOH20 分钟前
HOW - prefetch 二级页面实践
前端·javascript·react.js
EF@蛐蛐堂22 分钟前
WUJIE VS QIANKUN 微前端框架选型(一)
前端·vue.js·微服务·架构
咚咚咚小柒29 分钟前
【前端】用el-popover做通用悬停气泡(可设置弹框宽度)
前端·javascript·vue.js·elementui·html·scss
Ares-Wang31 分钟前
CSS3》》 transform、transition、translate、animation 区别
前端·css·css3