Html CSS span悬停不工作

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

.text链接{
颜色：#446CB3；
字体系列：“Tahoma”；
字体大小：15px；
文字装饰：无；
}
.文本链接：悬停{
文字装饰风格：虚线；
}

---

它看起来不像

文本装饰样式：虚线

是：

要获得完全支持，可以使用

边框底部样式：虚线

为了使其正常工作，您需要使用

文本装饰：none

从锚元素中删除下划线。然后只需在元素中添加一个

边框底部

：

a{
文字装饰：无；
}
.文本链接{
颜色：#446CB3；
字体系列：“Tahoma”；
字体大小：15px；
边框底部：1px实心；
}
.文本链接：悬停{
边框底部样式：虚线；
}

试试这个

HTML:

---

你用的是什么浏览器？只有Firefox才支持

文本装饰样式

，如果关闭

文本装饰样式

，则悬停效果良好。请参阅。

您还应该设置并可能

也考虑使用速记性质：

。文本链接：悬停{
文字装饰：下划线虚线；
}

.text链接{
颜色：#446CB3；
字体系列：“Tahoma”；
字体大小：15px；
}
.文本链接：悬停{
文字装饰：下划线虚线；
}

---

这仅由firefox支持，并且需要

-moz-

前缀

还应将其应用于

a

（或将其从

a

中移除，并在

span

(

a{
颜色：#446CB3；
字体系列：“Tahoma”；
字体大小：15px；
}
a:悬停{
-莫兹文字装饰风格：虚线；
}

仅受Firefox 36支持（在撰写本文时，Firefox 36尚未在stable分支上发布）

对于早期版本的Firefox，您可以使用属性的前缀版本

-moz-

。在其他浏览器中，您只能使用边框来伪造属性。

.text链接{
颜色：#446CB3；
字体系列：“Tahoma”；
字体大小：15px；
文字装饰：无；
}
.文本链接：悬停{
文字装饰：下划线；
文字装饰风格：虚线；
}

---

仅受FireFox支持。您看到的是链接的线条，而不是跨度。如果您给跨度一条线，它将与链接的线条一起落下，因此即使在FireFox中，虚线也可能不可见。同意@GolezTrol。文本装饰样式不受支持。请参阅此处的浏览器支持：注意

边框底部

与下划线不同。下划线的位置由

文本下划线位置

控制，默认情况下为

自动

。在大多数情况下，这意味着下划线接近字母基线。但是

边框底部

的行为更像

文本下划线位置：下。
<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{
    border-bottom: 2px dotted #446CB3;
}