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

html页面,当鼠标移开A字标就隐藏颜色框

html页面代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>颜色选择器</title><style>body {font-family: "Microsoft YaHei", sans-serif;padding: 20px;}.color-icon {width: 14px;height: 14px;cursor: pointer;}.color-picker {display: none;grid-template-columns: repeat(9, 10px);gap: 5px;margin: 10px 0;}.color-box {width: 10px;height: 10px;cursor: pointer;border: 2px solid #ccc;border-radius: 4px;}#text {font-size: 18px;margin-top: 20px;}</style>
</head>
<body><h2>点击图标选择颜色:</h2><!-- 图标 -->
<img src="./images/auto.png" alt="选择颜色" class="color-icon" id="togglePicker"><!-- 颜色选择器 -->
<div class="color-picker" id="colorPicker"></div><!-- 正文 -->
<div id="text">这是正文内容,点击颜色块来更改我的颜色。</div><script>const togglePicker = document.getElementById('togglePicker');const colorPicker = document.getElementById('colorPicker');const text = document.getElementById('text');const container = document.createElement('div');container.style.display = 'inline-block';togglePicker.parentNode.insertBefore(container, togglePicker);container.appendChild(togglePicker);container.appendChild(colorPicker);// 点击图标时显示颜色选择器togglePicker.addEventListener('click', () => {colorPicker.style.display = 'grid';});// 鼠标移出图标和颜色选择区域后隐藏颜色选择器container.addEventListener('mouseleave', () => {colorPicker.style.display = 'none';});// 设置颜色块const colors = ['#000000', '#333333', '#666666', '#999999', '#CCCCCC', '#FFFFFF', '#FF0000', '#FF6600', '#FFFF00','#00FF00', '#00FFFF', '#0000FF', '#9900FF', '#FF00FF', '#FF9999', '#FFCC99', '#FFFF99', '#CCFFCC','#CCFFFF', '#CCCCFF', '#FFCCFF', '#660000', '#996600', '#666600', '#006600', '#006666', '#000066','#660066', '#990000', '#FF9900', '#99CC00', '#009933', '#33CCCC', '#3399FF', '#9966FF', '#CC3366','#CC0000', '#CC6600', '#999900', '#009900', '#0099CC', '#0000CC', '#9900CC', '#CC0066', '#333300'];colors.forEach(color => {const box = document.createElement('div');box.className = 'color-box';box.style.backgroundColor = color;box.addEventListener('click', () => {text.style.color = color;});colorPicker.appendChild(box);});colorPicker.style.gridTemplateColumns = 'repeat(9, 10px)';// 跳转按钮function url() {window.location.href = "返回.html";}
</script><!-- 跳转按钮 -->
<button onclick="url()">跳转</button></body>
</html>

效果图:

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

相关文章:

  • Spring Boot项目中大文件上传的优化策略与实践
  • 华为鸿蒙3.0 4.0完全关闭纯净模式的方法以及临时绕过纯净模式检测的方法
  • 接口(上篇)
  • 基于深度学习的自动调制识别网络(持续更新)
  • 亚洲牧原:活跃行业交流,延伸公益版图,市场拓展再结硕果
  • 布隆过滤器原理
  • 我的世界模组开发——机械动力的渲染(4)
  • java-io流
  • 对象序列化与反序列化
  • 【PyTorch】PyTorch 自动微分与完整手动实现对比
  • vue3 element plus table 使用固定列,滑动滚动会错位、固定列层级异常、滑动后固定列的内容看不到了
  • Java多线程 V1
  • AIStarter 3.2.0正式上线!高速下载+离线导入+一键卸载新功能详解【附完整使用教程】✅ 帖子正文(字数:约 400 字)
  • 静态路由综合实验
  • WiFi技术深度研究报告:从基础原理到组网应用与未来演进
  • python+django/flask基于微信小程序的农产品管理与销售APP系统
  • CTFshow-PWN-栈溢出(pwn62-pwn64)
  • JAVA面试宝典 -《新潮技术:协程与响应式编程实践》
  • 【Ubuntu】编译sentencepiece库
  • next.js打包后的前端资源如何进行部署和访问,为什么没有index.html
  • Vue响应式原理六:Vue3响应式原理
  • Java 17 新特性解析:密封类与模式匹配的完美协作
  • 01背包问题总结
  • 三维旋转沿轴分解
  • AWS ECS任务角色一致性检查与自动修复工具完全指南
  • LVGL学习笔记-----进度条控件(lv_bar)
  • Java结构型模式---桥接模式
  • 什么?不知道 MyBatisPlus 多数据源(动态数据源)干什么的,怎么使用,看这篇文章就够了。
  • AI探索 | 豆包智能助手跟扣子空间(AI办公助手)有什么区别
  • Ranger框架的发展历程