javascript - 在 JavaScript 中设置下划线(文本修饰)的粗细

Question

我正在尝试找出如何在 JavaScript 中设置下划线的粗细(当光标悬停时发生的文本装饰)。目前，文本变成了这样的下划线:

x.style.textDecoration = "underline";

和“onmouseout”，这是撤消如下:

x.style.textDecoration = "none";

到目前为止，我在网上看到的所有建议都与格式化标签的底部边框有关。我不是试图格式化菜单栏或任何其他元素，而是普通的超链接。我已经在各种浏览器中尝试过，默认的下划线在 Firefox 中看起来不错，但在 Chrome 中，这条线很细，与它加下划线的粗体文本形成鲜明对比。

非常感谢任何有关如何解决此问题的建议。

Answer 1

CSS :hover应该用于此类任务

.x{
    /* default styles here */
}

.x:hover {
    /* HOVER default styles here */
}

如果您希望能够控制“下划线”的厚度
使用border-bottom相反 或 box-shadow inset .

整个填充 anchor 上的边框

.x{
  display:         inline-block;
  color:           magenta;
  background:      #ddd;
  padding:         15px 15px 10px;
  text-decoration: none;
  border-bottom:   5px solid transparent;
  transition:      border-bottom 0.3s;
}

.x:hover{
  border-bottom-color: magenta;
}

<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>

在Anchor的文本上只使用内部<span>和 inset box-shadow

.x{
  display:         inline-block;
  color:           magenta;
  background:      #ddd;
  padding:         15px 15px 10px;
  text-decoration: none;
}

.x span{
  transition:      0.3s;
  box-shadow: inset 0 -2px 0 0 trasparent;
}

.x:hover span{
  box-shadow: inset 0 -2px 0 0 magenta;
}

<a class="x" href="#"><span>Link 1</span></a>
<a class="x" href="#"><span>Link 1</span></a>
<a class="x" href="#"><span>Link 1</span></a>

使用:after伪以获得更多控制

.x{
  position:        relative;
  color:           magenta;
  text-decoration: none;
}

.x:hover:after{
  content:    "";
  position:   absolute;
  left:       0;
  bottom:     -3px;      /* Control bottom position */
  width:      100%;
  height:     5px;       /* Set your desired thickness */
  background: magenta;
}

<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>