在自定义 Logseq 主题时遇到的一些关于 CSS 的疑问

[jaredyam]

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 后会出现：

1. 如果没有发生 focus-within 事件，hover 事件大致可以正常工作，但是和 focus-within 下的行为不太一致
2. focus-within 事件仍然会被监听，干扰 hover 时的行为

有没有比较懂 CSS 又在用 Logseq 的大佬看看上面代码怎么改可以支持 hover 时高亮或者两者同时高亮[please]

[byheaven0912]

插件市场有个类似功能插件，借鉴一下？