Css实现文字的高亮

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text {
            display: inline-block;
            cursor: pointer;
            font-size: 28px;
            padding: 40px 60px;
            border: 1px solid red;
        }
        .text:focus {
            color: aqua;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="text" tabIndex="1">1</div>
        <div class="text" tabIndex="1">2</div>
        <div class="text" tabIndex="1">3</div>
        <div class="text" tabIndex="1">4</div>
        <div class="text" tabIndex="1">5</div>
        <div class="text" tabIndex="1">6</div>
        <div class="text" tabIndex="1">7</div>
    </div>
</body>
</html>

tips:通过给元素添加 accesskey、tabindex 属性为元素添加快捷键及键盘焦点顺序

相关推荐
daols882 分钟前
vue表格vxe-table实现表头合并,分组表头自定义合并
前端·vue.js·vxe-table
执行部之龙2 分钟前
js手写——防抖
开发语言·前端·javascript
DEMO派2 分钟前
JavaScript数据存储三剑客:Object、Map与WeakMap完全指南
开发语言·前端·javascript
一拳不是超人3 分钟前
半年AI编程实战总结:从工具到心法,让AI成为你的超能力
前端·人工智能·ai编程
阿杜杜不是阿木木4 分钟前
从0到1构建像Claude Code那样的Agent(二):工具
前端·chrome·agent·ai编程·cluade code
cramer_50h7 分钟前
Python的web开发框架Django再次更新
前端·python·django
weixin_6687 分钟前
Clawith 大模型设计逻辑与前端接口架构分析 -AI分析
前端·人工智能·架构
x-cmd7 分钟前
[x-cmd] Chrome DevTools MCP 更新:支持 coding agent 直接接管当前的浏览器窗口
前端·chrome·ai·agent·chrome devtools·x-cmd·mcp
Never_Satisfied9 分钟前
在HTML & CSS中,user-select属性详解
前端·css·html
数据潜水员29 分钟前
解决el-carousel 前后图片切换闪烁问题
前端·javascript·vue.js