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 属性为元素添加快捷键及键盘焦点顺序

相关推荐
gnip14 分钟前
链式调用和延迟执行
前端·javascript
SoaringHeart25 分钟前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.28 分钟前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu38 分钟前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss38 分钟前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师41 分钟前
React面试题
前端·javascript·react.js
木兮xg42 分钟前
react基础篇
前端·react.js·前端框架
ssshooter1 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘2 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai2 小时前
HTML HTML基础(4)
前端·html