Question

当鼠标悬停在链接上时我想显示虚线，这种方法不起作用。

＆＃13;

.text-link {
  color: #446CB3;
  font-family: "Tahoma";
  font-size: 15px;
 text-decoration:none;
}
.text-link:hover {
  text-decoration-style: dotted;
}

＆＃13;

<a href="URL" target="_blank" data-role="none">
  <span class="text-link">Click me</span>
</a>

＆＃13;

Answer 1

看起来text-decoration-style: dotted不是supported in all browsers：

enter image description here

要获得完全支持，您可以使用border-bottom-style: dotted。

为了使其正常工作，您需要使用text-decoration: none从锚元素中删除下划线。然后只需在元素中添加border-bottom：

a {
    text-decoration: none;
}
.text-link {
    color:#446CB3;
    font-family:"Tahoma";
    font-size:15px;
    border-bottom: 1px solid;
}
.text-link:hover {
    border-bottom-style: dotted;
}

<a href="URL" target="_blank" data-role="none"><span class="text-link">Click me</span></a>

Answer 2

试试这个。

HTML：

<a href="URL" target="_blank" data-role="none"><span class="text-link">Click me</span></a>

CSS：

.text-link{
    color:#446CB3;
    font-family: "Tahoma";
    font-size:15px;
    text-decoration: none;
}

.text-link:hover{
    border-bottom: 2px dotted #446CB3;
}

Answer 3

您使用的浏览器是什么？ text-decoration-style只有Firefox根据W3Schools支持，如果您关闭text-decoration-style，则悬停正常。见this fiddle。

Answer 4

只有firefox支持，它需要-moz-前缀。

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style

它也应该应用于a（或从a中移除它并在text-decoration上应用完整的span （< / p>

＆＃13;

a {
  color: #446CB3;
  font-family: "Tahoma";
  font-size: 15px;
}
a:hover {
  -moz-text-decoration-style: dotted;
}

＆＃13;

<a href="URL" target="_blank" data-role="none">
  <span class="text-link">Click me</span>
</a>

＆＃13;

Answer 5

text-decoration-style仅受Firefox 36支持（在撰写本文时尚未在稳定分支上发布）。

对于早期版本的Firefox，您可以使用该属性的-moz-前缀版本。在其他浏览器中，您只能使用边框伪装它。

Answer 6

您还应该设置text-decoration-line，也可以设置text-decoration-color。

另请考虑使用text-decoration速记属性：

.text-link:hover {
  text-decoration: underline dotted;
}

.text-link {
  color: #446CB3;
  font-family: "Tahoma";
  font-size: 15px;
}
.text-link:hover {
  text-decoration: underline dotted;
}

<a href="URL" target="_blank" data-role="none">
  <span class="text-link">Click me</span>
</a>

但是，你仍然会有锚text-decoration。为了防止主播text-decoration影响.text-link（但不能影响主播中的其他内容），您可以使用

.text-link {
  display: inline-block;
}

.text-link {
  color: #446CB3;
  font-family: "Tahoma";
  font-size: 15px;
}
.text-link {
  display: inline-block;
}
.text-link:hover {
  text-decoration: underline dotted;
}

<a href="URL" target="_blank" data-role="none">
  <span class="text-link">Click me</span>
</a>

Answer 7

.text-link {
  color: #446CB3;
  font-family: "Tahoma";
  font-size: 15px;
 text-decoration:none;
}
.text-link:hover {

  text-decoration:underline;
  text-decoration-style: dotted;
}

<a href="URL" target="_blank" data-role="none" >
  <span class="text-link">Click me</span>
</a>

如果你还想要悬停下划线和点

.text-link {
  color: #446CB3;
  font-family: "Tahoma";
  font-size: 15px;
 text-decoration:none;
}
.text-link:hover {

  text-decoration:underline;
  text-decoration-style: dotted;
}

<a href="URL" target="_blank" data-role="none" class="text-link">
  <span>Click me</span>
</a>

如果您只是想要悬停点

CSS跨度悬停不起作用

7 个答案: