登录 注册

代码块类型输入区域如何获得焦点?

本贴最后更新于 1115 天前，其中的信息可能已经天翻地覆

以下是我的 css 写法：

.vditor-ir__marker[data-type="code-block-info"] {
  opacity: 0;
}

.vditor-ir__node[data-type="code-block"]:hover
  .vditor-ir__marker[data-type="code-block-info"],
.vditor-ir__node[data-type="code-block"]:focus-within
  .vditor-ir__marker[data-type="code-block-info"] {
  opacity: 1;
}

尽管使用了 :focus-within，但是输入的时候如果把鼠标悬停在弹出菜单上时，类型输入区域的透明度还是会变回 0，如下图：

代码块类型输入区域.gif

所以想问问，应该如何获得焦点呢？

  • 思源笔记

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

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

    18709 引用 • 69853 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    6554 引用 • 29428 回帖 • 246 关注
抚州 位置
500 悬赏
2 关注
9 回帖
4
4
1.1k 39 156 153 52 20 3 684

相关帖子

9 回帖
代码块类型输入区域如何获得焦点?

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Achuan-2 • • 1 评论
    订阅者 先知

    感谢老哥，现在代码块更简洁好看了

    代码样式.gif

    哈哈哈没事没事，共同进步嘛
    svchord •
  • 其他回帖
  • Achuan-2 •
    订阅者 先知

    V 姐用 js 有加了一个 focus 产生的类名，用这个就好.vditor-ir__node--expand

    .vditor-ir__node--expand[data-type='code-block'] span.vditor-ir__marker--info {
    opacity: 1;
}
    1 回复
  • svchord • • 2 评论
    捐赠者 作者

    我把代码改成这样也还是没有效果…

    .vditor-ir__node[data-type="code-block"] span.vditor-ir__marker--info:hover,
.vditor-ir__node[data-type="code-block"]
  span.vditor-ir__marker--info:focus-within {
  opacity: 1;
}
    重置 display
    Vanessa •
    @Vanessa 噢这个我已经重置过了，这个问题是我设置的 opacity 导致的，因为我把 opacity 恒定为 1 就不会有这个问题了
    svchord •
  • Achuan-2 • • 5 评论
    订阅者 先知

    focus 是不是只针对 input 和 textarea 啊，比如表格的 br 我一直想是点击表格单元格才显示，而不是 hover，然而没法实现。

    应该不是，我查了下:focus 的一些例子，也有直接作用于 div 上的，如：https://www.zhangxinxu.com/wordpress/2018/01/css-focus-within-pseudo-class-selector/ 的最后一个例子
    svchord •
    @zqhjl 那个例子好像有子元素才可以成功
    Achuan-2 •
    @zqhjl 还有，老哥，我发现你的 notion 主题改了代码类型样式之后，代办列表里的代码块类型不能显示了或者说显示在页面最上方
    Achuan-2 •
    @Achuan-2 但我用的:focus-within 就是有子元素的啊…
    svchord •
    @Achuan-2 我试了下，默认主题下待办列表里的代码块就是有 bug 的…你可以发个帖子
    svchord •
  • 查看全部回帖
svchord
抚州
回帖
78
 帖子
41
 积分
35

近期热议

推荐标签 标签

  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 643 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 7 关注
  • SOHO

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

    7 引用 • 55 回帖 • 92 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 398 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    333 引用 • 323 回帖 • 65 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 251 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    6554 引用 • 29428 回帖 • 246 关注
  • 分享

    有什么新发现就分享给大家吧！

    242 引用 • 1748 回帖 • 1 关注
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    185 引用 • 318 回帖 • 344 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    25 引用 • 215 回帖 • 166 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    84 引用 • 139 回帖
  • 智能合约

    智能合约（Smart contract）是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易，这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 7 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    163 引用 • 1450 回帖
  • CSS

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

    180 引用 • 447 回帖 • 1 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 462 关注
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 23 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 6 关注
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖 • 1 关注
  • 思源笔记

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

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

    18709 引用 • 69853 回帖 • 1 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 111 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    40 引用 • 24 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 345 关注
  • 工具

    子曰：“工欲善其事，必先利其器。”

    275 引用 • 682 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 626 关注
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 618 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 684 关注

最新标签