
custom.css:
.dark-theme, html[data-theme="dark"] { --ls-block-bullet-active-color: rgb(217, 255, 0); --ls-block-bullet-threading-width: 1px; } .block-content-wrapper { position: relative; } .bullet-container { height: 14px !important; width: 14px !important; position: relative; transform: translate(1px, -1px); } .ls-block div.items-center { position: relative; height: 26px !important; } .ls-block .ls-block>div>div.items-center::before { content: ""; left: -1px; right: 6px; top: calc(-50% + var(--ls-block-bullet-threading-width) * 0.5 - 1px); bottom: 50%; position: absolute; border-left: var(--ls-block-bullet-threading-width) solid transparent; border-bottom: var(--ls-block-bullet-threading-width) solid transparent; border-bottom-left-radius: 10px; } .ls-block .block-children>.ls-block::before { content: ""; top: -1rem; bottom: 0; border-left: var(--ls-block-bullet-threading-width) solid transparent; left: -1px; position: absolute; } .ls-block[haschild="true"]>div>.block-content-wrapper::before { pointer-events: none; content: ""; top: 12px; bottom: 0; left: -15px; position: absolute; border-left: var(--ls-block-bullet-threading-width) solid transparent; } .ls-block[haschild="true"]:focus-within>div>.block-content-wrapper::before { border-color: var(--ls-block-bullet-active-color); --ls-block-bullet-threading-width: 3px; } .ls-block .ls-block:focus-within>div>div.items-center::before { border-color: var(--ls-block-bullet-active-color); --ls-block-bullet-threading-width: 3px; } .ls-block .block-children:focus-within>.ls-block:not(:focus-within)::before { border-color: var(--ls-block-bullet-active-color); --ls-block-bullet-threading-width: 3px; } .ls-block .block-children:focus-within>.ls-block:focus-within~.ls-block::before { border-color: transparent; } 以上代码可以作为 Logseq 的 custom.css 自定义主题,在光标 focus-within 一个 block 时会高亮当前 block 的嵌套路径。如下图加粗绿线:

我现在有如下疑问:
上述代码如何从监听 focus-within 事件切换到 hover 事件时仍然奏效?有没有办法同时高亮 focus-within 和 hover 事件时对应的 block 路径? 从目前的尝试来看,如果直接将所有 :focus-within 替换为 :hover 后会出现:
focus-within 事件,hover 事件大致可以正常工作,但是和 focus-within 下的行为不太一致focus-within 事件仍然会被监听,干扰 hover 时的行为有没有比较懂 CSS 又在用 Logseq 的大佬看看上面代码怎么改可以支持 hover 时高亮或者两者同时高亮[please]
1 byheaven0912 2022-03-26 21:59:13 +08:00 插件市场有个类似功能插件,借鉴一下? |