scss を使用しているので、li 項目の上にマウスを置くときにすべてのテキスト (数字とテキスト) の下線を解除する必要があります。
これは例ですが、数字には下線が引かれていません
https://jsfiddle.net/viking_123/9hgjyo05/1/
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
SCSS
ol li {
cursor:pointer;
&:hover {
text-decoration: underline;
}
}
ありがとう
1
こちらの stackoverflow.com/questions/35586267/… を参照してください。
– デブスミタ・ポール
2020 年 9 月 3 日 10:28
------------------------
代わりにこれをお試しください。
jsfiddle デモ
list-style-position:inside; を追加してください。そして表示:インラインブロック;
に。
また、border-bottom を <li> に追加します。
SCSS
ol{
list-style-position:inside;
display:inline-block;
}
ol li {
cursor:pointer;
border-bottom:2px solid transparent;
&:hover {
border-bottom:2px solid #111;
}
}
動作デモ
ol{
list-style-position:inside;
display:inline-block;
}
ol li {
cursor:pointer;
border-bottom:2px solid transparent;
float: left;
clear: left;
}
ol li:hover {
border-bottom:2px solid #111;
}
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
1
これを確認してもらえますか @Victor?疑問がある場合は、ここにコメントしてください。
– レイズ AC
2020 年 9 月 3 日 11:19
------------------------
list-style-position: inside; を追加できます。
で要素。 https://www.w3schools.com/css/css_list.asp
ol {
/* Add this to style*/
list-style-position: inside;
li {
cursor:pointer;
&:hover {
text-decoration: underline;
}
}
}
これが実際に動作するフィドルです。
注: これを見つけてくれた @Rayees AC に感謝します。このアプローチは、何らかの理由で::マーカー (別名リストの箇条書き) にテキスト装飾が適用されないため、Mozilla Firefox ブラウザーでは動作が異なります。他のブラウザをサポートする必要がある場合は、代わりに @Rayees AC のアプローチを試してください。
8
1
この list-style-position: inside;
へ要素 ？そうですよね？
– レイズ AC
2020 年 9 月 3 日 11:13
いいえ、<li> にあるはずです。要素。
– ブラックラズベリー
2020 年 9 月 3 日 11:23
正しく動作していませんか? jsfiddle にデモを追加できますか、またはコードペン
– レイズ AC
2020 年 9 月 3 日 11:27
@RayeesAC、申し訳ありませんが訂正させていただきます。
でも動作するはずです。要素も。ここにフィドルがあります。 jsfiddle.net/blackraspberryyyy/87r6f03a/10
– ブラックラズベリー
2020 年 9 月 3 日 11:33
1
Firefox ブラウザでは動作しません。確認してもらえますか..
– レイズ AC
2020 年 9 月 3 日 12:07
