一个锚中有多个下划线颜色
[英]Multiple underline colors in one anchor
问题描述
I would like to, within one anchor </a> , have two different underline colors. 
我想，一个锚内</a> ，有两种不同颜色的下划线。 Like so: 像这样：
<a href="somehref">
<span>This text should underline RED on `a` hover</span>
<span>This text should underline GREY on `a` hover</span>
</a>
I can add text-decoration to each span on hover but this causes each line to hover individually. 我可以在悬停时为每个跨度添加text-decoration ，但这会导致每行单独悬停。 I want it so that when I hover over anywhere in the </a> both spans underline with their font color inherited. 我想要它，以便当我将鼠标悬停在</a>任何位置时，两个跨度下划线并继承其字体color 。
Is this possible? 这可能吗？
Note: I'm aware of text-decoration-color but due to limit support I cannot use it. 注意：我知道text-decoration-color但由于限制支持，我无法使用它。
6 个解决方案
解决方案1
18 已采纳 2016-07-20 12:30:36
Some thing like this? 有点像这样吗？ You can use the anchor's :hover CSS pseudo class to style it's child and descendant. 您可以使用锚点:hover CSS伪类来设置它的子项和子项的样式。
Here is an reference to CSS child and descendant selectors. 这是对CSS 子级和后代选择器的引用。
a { color: black; text-decoration: none; } a span:first-child { color: red; } a span:last-child { color: grey; } a:hover span { text-decoration: underline; }
<a href="somehref"> <span>This text should underline RED on `a` hover</span> <span>This text should underline GREY on `a` hover</span> </a>
解决方案2
6 2016-07-20 12:28:23
Have you tried this? 你试过这个吗？
a:hover span {
text-decoration: underline; }
text-decoration: underline will inherit the font color automatically, so if your spans are already with gray/red colors, all you need to do is make them underline upon hovering the a text-decoration: underline会自动继承字体颜色，所以如果您的跨度已经是灰色/红色，那么您需要做的就是在悬停a时使它们下划线
解决方案3
5 2016-07-20 12:32:41
You can also try this. 你也可以试试这个。 if there are so many span element 如果有这么多的span元素
a{ text-decoration:none; } a:hover span:nth-child(1){ border-bottom:1px solid red; } a:hover span:nth-child(2){ border-bottom:1px solid grey; }
<a href="somehref"> <span>This text should underline RED on `a` hover</span> <span>This text should underline GREY on `a` hover</span> </a>
解决方案4
4 2016-07-20 12:32:41
Try this 试试这个
a{ text-decoration:none; } a:hover #span1{ text-decoration: none; border-bottom: 1px solid red; } a:hover #span2{ text-decoration: none; border-bottom: 1px solid grey; }
<a href="somehref"> <span id="span1">This text should underline RED on `a` hover</span><br/> <span id="span2">This text should underline GREY on `a` hover</span> </a>
解决方案5
4 2016-07-20 12:36:04
I've added this to inherit the color of the span, which is what you wanted, rather than using the HEX in the underline. 我已经添加了这个来继承span的颜色，这是你想要的，而不是在下划线中使用HEX 。 Note that this is SCSS. 请注意，这是SCSS。
CSS Color Module - 4.4.
CSS1 and CSS2 defined the initial value of the border-color property to be the value of the color property but did not define a corresponding keyword.
CSS3 extends the color value to include the currentColor keyword to allow its use with all properties that accept a value.
Fiddle for you 小提琴给你
https://jsfiddle.net/4f0mL136/3/ https://jsfiddle.net/4f0mL136/3/
<a href="somehref">
<span>This text should underline RED on `a` hover</span>
<span>This text should underline GREY on `a` hover</span>
</a>
a {
text-decoration: none;
}
span:last-child {
color: black;
}
span:first-child {
color: red;
}
a:hover {
span {
border-bottom: 1px solid currentColor;
}
}
span { // display purposes
display: block;
border-bottom: 1px solid transparent;
margin-bottom: 10px;
transition: border-bottom .2s ease-in;
}
解决方案6
-2 2016-07-20 12:37:33
there are a few ways to do it the best way is to create a class(in CSS) and set the color there the second way is to insert the CSS in the html code like here 有几种方法可以做到最好的方法是创建一个类（在CSS中）并设置颜色，第二种方法是在html代码中插入CSS，就像这里一样
.tool1:hover { background-color:red; } .tool2:hover { background-color:grey; }
<!DOCTYPE html> <html> <style> </style> <body style="text-align:center;"> <p>Move the mouse over the text below:</p> <a href="somehref"> <span class='tool1'>This text should underline RED on `a` hover</span> <span class='tool2'>This text should underline GREY on `a` hover</span> </a> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.