【实用技巧】如何改善笔记的链接编辑体验

经验分享
, ,
5

#1 引入帖“链接美化”提到 hover 动画效果丢失问题，想了个变通办法，感谢各位。

v1.6.7 沙箱测试，示例时延移入 140ms 移出 560ms：

20240802_083024

CSS 代码，点击展开 
body {
  --link-decoration: none; /*内链下划线*/
  --link-external-decoration: none; /*外链下划线*/
  text-underline-offset: 4.6px; /*下划线与文本间距*/
}

/**References
 - https://forum-zh.obsidian.md/t/topic/11277/5 by @subframe7536
 - https://forum.obsidian.md/t/how-to-hide-url-link-in-edit-mode-until-hovered-on/82827
 - https://forum-zh.obsidian.md/t/topic/38000/1 by @Moy
 - https://forum-zh.obsidian.md/t/topic/38000/2 by @Azona77
*/

/*点击编辑内链*/
.cm-hmd-internal-link > .cm-underline,
/*点击编辑外链*/
.cm-link > .cm-underline {pointer-events: none;}

/*隐藏链接网址*/
.cm-line > .cm-string.cm-url:not(.cm-formatting),
.cm-hmd-internal-link.cm-link-has-alias {
  font-size: 0; transition: font-size;
  &:hover {font-size: inherit; transition-delay: 140ms;}
  &:not(:hover) {transition-delay: 560ms;} /*时延秒数, 可自填*/
  &::after {content: '§'; font-size: var(--font-text-size);}
}
3 个赞