Html 如何在悬停时制作虚线下划线链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15485387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a dotted underline link on hover?
提问by webdevkit
I have a link <a class="link-articles" href="#articles">My Articles</a>
我有链接 <a class="link-articles" href="#articles">My Articles</a>
and my css .link-articles { text-decoration: underline; color: blue; }
和我的 css .link-articles { text-decoration: underline; color: blue; }
However, on hover I would like to have instead of blue underline a red underline, but the text should remain blue and only the underscore change color to red.
但是，在悬停时，我希望用红色下划线代替蓝色下划线，但文本应保持蓝色，只有下划线将颜色更改为红色。
How to do such thing?
这样的事情怎么办？
回答by webdevkit
Since you cannot denote which colora second color for the text underline, one strategy is to remove it and use a border.
因为你不能表示 哪种颜色文本下划线的第二种颜色，一种策略是将其删除并使用边框。
.link-articles
{
border-bottom: solid 1px blue;
text-decoration: none;
}
.link-articles:hover
{
border-bottom-color: red;
}
Note that if you leave the text-underline, it will shift down when hovering, since it's placement is not exactly the same location as the bottom border.
请注意，如果您离开text-underline，它会在悬停时向下移动，因为它的位置与底部边框的位置不完全相同。
This approach has an added advantage of being able to position the underline by using have alternate line styles, by replacing line-heightandsolidwith dottedor dashed.
这种方法的优点是能够以一个附加的优点，通过使用定位下划线具有替代线型，通过更换line-height和solid与dotted或dashed。
Borderless Approach:
无边界方法：
As @Pacerier points out in the comments, here is an alternate strategy using pseudo-classes and CSS content (JSFiddle):
正如@Pacerier 在评论中指出的那样，这是使用伪类和 CSS 内容（JSFiddle）的替代策略：
.link-articles
{
position: relative;
}
.link-articles[href="#articles"]:after
{
content: 'My Articles';
}
.link-articles:after
{
color: red;
left: 0;
position: absolute;
top: 0;
}
However, with anti-aliasing, it may have some color-blending on the text edges. If you don't like the thought of having to manually put contentin your CSS, you could use an attribute or duplicate element.
但是，使用抗锯齿功能时，文本边缘可能会出现一些颜色混合。如果您不喜欢必须手动放入contentCSS的想法，您可以使用属性或重复元素。
回答by Kermit
Use border-bottom:
使用border-bottom：
a:hover.link-articles {border-bottom: 1px dotted red; text-decoration: none;}
回答by Linus Caldwell
Use a border:
使用边框：
.link-articles { text-decoration: none; border-bottom: blue 1px solid; }
.link-articles:hover { border-bottom: red 1px dotted; }
回答by Mohammad Adil
Demo Fiddle
演示小提琴
.link-articles { text-decoration: none; border-bottom: 1px dotted blue; }
.link-articles:hover { text-decoration: none; border-bottom: 1px dotted red; }
回答by Rahul Tapali
回答by Anoop
Show bottom border on hover:
在悬停时显示底部边框：
a.link-articles {
text-decoration: none;
border-bottom: 1px dotted blue;
}
a.link-articles:hover {
border-bottom: 1px dotted red;
}
回答by greener
The :hoverstyle is used to set style when user places mouse over element.
该:hover样式用于设置用户将鼠标悬停在元素上时的样式。
.link-articles { ... }
.link-articles:hover { ... }
And you can use the border-bottomproperty instead of text-decorationfor dotted, dashed and width styling.
并且您可以使用该border-bottom属性代替text-decoration点线、虚线和宽度样式。
回答by Magicprog.fr
You can use the CSS3 text-decoration-colorproperty, but unfortunatly, the text-decoration-colorproperty is not supported in any of the major browsers.
您可以使用 CSS3text-decoration-color属性，但遗憾的text-decoration-color是，任何主要浏览器都不支持该属性。
Firefox supports an alternative, the -moz-text-decoration-colorproperty.
Firefox 支持另一种-moz-text-decoration-color属性。
Reference: http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp
参考：http: //www.w3schools.com/cssref/css3_pr_text-decoration-color.asp
Browser Support: http://caniuse.com/#search=text-decoration-color
浏览器支持：http: //caniuse.com/#search=text-decoration-color
JSFiddle(Doesn't works on all browsers)
JSFiddle（不适用于所有浏览器）
So the best way to do that is still to use the border-bottomcss property as a trick.
所以最好的方法仍然是使用border-bottomcss 属性作为一个技巧。
回答by Joan
Just do:
做就是了：
a:hover {
text-decoration-style: dotted
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style
