登录 注册

CSS 片段分享（行 focus 高亮显示）

本贴最后更新于 241 天前，其中的信息可能已经物是人非
  • 前两天逛论坛，看到了群友分享的列表子弹线的效果。是通过 CSS 代码和 js 代码共同实现的，目前 Dark+ 主题和 Rem Craft 主题上应用了这一效果。
  • 将相关代码复制到代码片段中，果然很好用，视觉效果如图所示（考虑到不同主题兼容性，需修改部分参数）
    • image.png
  • 然后自己联想到之前看过的一篇分享文章，分享了很多代码片段，其中有一条是实现行高亮效果
  • 将相关代码放在代码片段中，发现行高亮主要是在鼠标悬浮的时候实现高亮效果。而结合子弹线效果，我想要实现鼠标专注在某行，然后某行高亮。或者将两者结合起来，悬浮或者专注的时候，都有高亮效果。
    • 于是，打开开发者工具，定位到相关选择器，右键选择 focus（专注）状态
    • 然后找到选择器代码
      • image.png
    • 再点击加号，即可找到专注状态的选择器，给其设置相应属性
      • image.png
    • 我想要实现更加方正素雅一点的效果，所以去除了阴影，加了透明度，加了边框。代码如下（代码起效的前提是在代码片段中添加并开启列表子弹线的 js 代码）： 
      • /* 这里是focus状态 */
.p.block-focus {
	outline: 1px dashed rgb(70, 110, 220);  
        border-radius: 0px !important;
	background-color: #d7e0e04d !important;
	transition: background-color .35s ease-out 0ms;
}
    • 若想要实现悬浮时同时也显示高亮，加上悬浮时的选择器即可 
      • .p:hover {
    outline: 1px dashed rgb(70, 110, 220);  
    border-radius: 0px !important;
	background-color: #d7e0e04d !important;
	transition: background-color .35s ease-out 0ms;
}
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    18862 引用 • 70625 回帖 • 3 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    180 引用 • 447 回帖
1 操作
Zhangwuji 在 2023-09-07 13:00:55 更新了该帖
1 感谢
1 关注
3 收藏
1 赞同
1 操作
3 回帖
438 209 5 88 6 6 123

相关帖子

3 回帖
CSS 片段分享（行 focus 高亮显示）

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
Zhangwuji
回帖
178
 帖子
27
 积分
1165

近期热议

推荐标签 标签

  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 41 关注
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    161 引用 • 473 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 686 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 2 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 31 关注
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖 • 7 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 739 关注
  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    261 引用 • 662 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • 电影

    这是一个不能说的秘密。

    120 引用 • 597 回帖 • 1 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 6 关注
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖 • 93 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    315 引用 • 1667 回帖 • 2 关注
  • 博客

    记录并分享人生的经历。

    270 引用 • 2386 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 104 关注
  • BND

    BND（Baidu Netdisk Downloader）是一款图形界面的百度网盘不限速下载器，支持 Windows、Linux 和 Mac，详细介绍请看这里。

    107 引用 • 1281 回帖 • 25 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 413 关注
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    169 引用 • 799 回帖
  • 创造

    你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！

    174 引用 • 990 回帖 • 1 关注
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 1 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 294 回帖
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 598 关注
  • gRpc
    10 引用 • 8 回帖 • 55 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 237 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    51 引用 • 37 回帖
  • 创业

    你比 99% 的人都优秀么？

    82 引用 • 1398 回帖

最新标签