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>

相关推荐
Liamhuo16 分钟前
2.1.7 network-浏览器-前端浏览器数据存储
前端·浏览器
洋葱头_16 分钟前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
前端小书生26 分钟前
React 组件渲染
前端·react.js
sjd_积跬步至千里31 分钟前
CSS实现文字横向无限滚动效果
前端
维他AD钙32 分钟前
前端基础避坑:3 个实用知识点的简单用法
前端
journs34 分钟前
micro-app微前端styled-components CSSOM模式 应用切换样式丢失问题
前端
呼啦啦小魔仙34 分钟前
elpis项目DSL设计分享
前端
李李记35 分钟前
别让 “断字” 毁了 Canvas 界面!splitByGrapheme 轻松搞定非拉丁文本换行
前端·canvas
来金德瑞36 分钟前
快速掌握 ProseMirror 的核心概念
前端
ygria40 分钟前
样式工程化:如何实现Design System
前端·前端框架·前端工程化