在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 */
}

如果您希望能够控制＆＃34;下划线＆＃34;的 厚度 ; 使用border-bottom代替或 box-shadow inset 。

整个填充锚点上的边框

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

仅使用内部<span>和inset box-shadow

在Anchor的文字上

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用:after伪进行更多控制

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果要使用JavaScript更新border-bottom样式属性，可以使用：

someTag.style.borderBottom="3px solid blue";

请注意，JavaScript中的 border-bottom 是 borderBottom

Answer 3

尝试使用css :after伪元素，:hover，font-family设置为block;调整font-size以更改线条的粗细，top更改为与元素文本对应的线条的位置

div {
  width:24px;
}

div:after {
  position:absolute;
  top:-24px;
  content:"_";
  width:0px;
  color:#000;
  display:none;
  font-weight:bold;
  font-family:block;
  font-size:48px;
}

div:hover:after  {
   cursor:pointer;
   display:block;
}

<div>abc</div>