当前位置: 首页 > news >正文

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>

 

 

http://www.dtcms.com/a/5157.html

相关文章:

  • 【概率统计】如何理解概率密度函数及核密度估计
  • 企业微信HOOK开发接口调用,发送语音消息
  • 《系统架构设计师教程(第2版)》第2章-计算机系统基础知识-04-计算机网络
  • 免费百度SEO优化工具,百度SEO优化排名工具
  • Linux篇:进程间通信
  • 数据结构与程序的关系
  • 1、命名空间、C++的复合类型、缺省参数
  • 第四章 SpringCloud Alibaba 实现Ribbon负载均衡
  • C#基础与进阶扩展合集-进阶篇(持续更新)
  • docker搭建nginx实现负载均衡
  • 学生成绩管理系统(Java)
  • [node] Node.js的Web 模块
  • 浅话人工智能和深度学习
  • 好用免费的AI换脸5个工具
  • 【Python3】【力扣题】383. 赎金信
  • 聊一聊大模型 | 京东云技术团队
  • 深度学习-学习笔记记录
  • kubernetes(k8s)容器内无法连接同所绑定的Service ClusterIP问题记录
  • Windows核心编程 HOOK
  • 【微服务】springboot整合quartz使用详解
  • 代码随想录二刷 | 栈与队列 |逆波兰表达式求值
  • HarmonyOs 4 (一) 认识HarmonyOs
  • Linux CentOS本地部署SQL Server数据库结合cpolar内网穿透实现公网访问
  • 6-55.汽车类的继承
  • Python-字典详解
  • 阿里云租赁费用_阿里云服务器多配置报价表
  • C语言实现植物大战僵尸(完整版)
  • 基于JavaScript的jimp库处理图片,添加绘制点
  • 阿里云新版公共实例从注册账号到创建设备生成参数教程
  • 【微信小程序】上传头像 微信小程序内接小程序客服