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>

相关推荐
Demoncode_y5 分钟前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
明天最后6 分钟前
使用 Service Worker 限制请求并发数
前端·service worker
java水泥工20 分钟前
基于Echarts+HTML5可视化数据大屏展示-电信厅店营业效能分析
前端·echarts·html5·大屏展示
鹿鹿鹿鹿isNotDefined26 分钟前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
运维行者26 分钟前
知乎崩了?立即把网站监控起来!
前端·javascript·后端
柳安忆27 分钟前
idea生成数据集调研
人工智能·笔记
aramae42 分钟前
详细分析平衡树--红黑树(万字长文/图文详解)
开发语言·数据结构·c++·笔记·算法
stayong44 分钟前
市面主流跨端开发框架对比
前端
庞囧1 小时前
大白话讲 React 原理:Scheduler 任务调度器
前端
东华帝君1 小时前
react 虚拟滚动列表的实现 —— 动态高度
前端