UserCSS:墨塗り記法
(たぶん)同様のコンセプト
墨塗り記法
マウスを hover すると見える
テスト テスト 、 テスト
安直な方法
strike要素を継承してしまうので、打ち消し線を消せない
strike要素を書き換えて、打ち消し線を消している(ちと乱暴)
code:stylexx.css
.deco-\- {
color: black; /* */
background-color: black; /* */
}
.deco-\-:hover {
color: inherit ; /* */
background-color: inherit ; /* */
}
strike {
text-decoration-line: none;
}
これでいいのか。
strike要素を書き換えるだけ(strikeは他では使っていないだろう) code:stylexx.css
strike {
color: black; /* */
background-color: black; /* */
text-decoration-line: none;
}
strike:hover {
color: inherit ; /* */
background-color: inherit ; /* */
}
code:style.css
.line span.deco strike {
color: black; /* 表示色 */
background-color: black; /* 背景色(表示色に合わせる) */
text-decoration: none; /* 取り消し線をキャンセル */
}
.line span.deco strike:hover {
color: inherit; /* 表示色を元に戻す */
background-color: inherit; /* 背景色を元に戻す */
/*text-decoration: underline solid red; /* アンダーライン(お好みで) */
}
code:stylexx.css
.line:not(.cursor-line) a.page-link:not(:hover) {
color: black;
background-color: black;
}
UserCSS.icon
https://img.shields.io/badge/UserCSS-墨塗り記法-1572B6.svg?logo=css3&style=for-the-badge