在悬停时显示下划线的文本

Question

你能用css在悬停时强调文字吗？(与链接的行为相似,但不是实际链接.)

1. 你有以下文字你好工作
2. 当您将鼠标悬停在文本上时,它会使用css强调它

(文字不是链接)

Answer 1

<span class="txt">Some Text</span>

.txt:hover {
    text-decoration: underline;
}

Answer 2

你只需要指定text-decoration: underline;与伪类 :hover.

HTML

<span class="underline-on-hover">Hello world</span>

CSS

.underline-on-hover:hover {
    text-decoration: underline;
}

我已经制作了一个有效的Code Pen Demo.

Answer 3

相当简单的过程我显然正在使用 SCSS，但您不必这样做，因为它最终只是 CSS！

HTML

<span class="menu">Menu</span>

社会保障局

<span class="menu">Menu</span>