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

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

news 2025/7/11 15:56:07

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>

效果图：