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

以下是我的 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

所以想问问,应该如何获得焦点呢?

广告 我要投放

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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 回复
  • 其他回帖
  • Achuan-2 1 评论
    订阅者

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

    代码样式.gif

    哈哈哈没事没事,共同进步嘛
    zqhjl
  • Achuan-2 5 评论
    订阅者

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

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

    诶你在待办列表中加入代码块不会有这个 bug 吗?

    任务列表中的代码块 bug.gif

    顺带抄送 @Vanessa V 姐看看这个 bug

    收到,后面修复
    Vanessa
  • 查看全部回帖