多個下劃線顏色在一個錨點

我想在一個錨點</a>內有兩種不同的下劃線顏色。像這樣：多個下劃線顏色在一個錨點

<a href="somehref"> 
    <span>This text should underline RED on `a` hover</span> 
    <span>This text should underline GREY on `a` hover</span> 
</a>

，我可以添加到text-decoration懸停每個跨度但這會導致各行分別徘徊。我想要它，以便當我將鼠標懸停在</a>的任何位置上時，它們都會跨越他們的字體color繼承。

這可能嗎？

注：我知道text-decoration-color，但由於支持限制，我無法使用它。

來源

2016-07-20 Geraint

如果你不侷限於CSS，然後看看http://letteringjs.com/ – Pureferret

有些事情是這樣強調？您可以使用錨點的CSS僞類來設置它的子級和後代。

以下是對CSS child和descendant選擇器的引用。

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>

來源

2016-07-20 12:30:36 Pugazh

使用此代碼和開關''用文字裝飾邊框bottom'：underline'解決了我的問題。 – Geraint

@Geraint我無法重現你所做的（我認爲我做錯了什麼）。你是說，而不是'邊框底部：1px純紅色'你有'文字裝飾：下劃線1px純紅色'？ –

對不起，應該已經更清楚了，而不是'border-bottom：1px solid red'我做了'text-decoration：underline'，當''被懸停時，這會給我下劃線，默認情況下獲得應用於範圍的顏色 – Geraint

你試過嗎？

a:hover span { 
    text-decoration: underline; }

text-decoration: underline將自動繼承字體顏色，所以如果你的跨度已經有灰色/紅色，所有你需要做的是讓他們在徘徊a

來源

2016-07-20 12:28:23 Forty

你也可以試試這個。如果有這麼多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>

來源

2016-07-20 12:32:41

試試這個

a{ 
 
\t 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>

來源

2016-07-20 12:32:41 Sree

您應該使用類而不是ID。 – Forty

@Forty：兩者不同。我沒有使用相同的ID爲兩個跨度 – Sree

OP是要求'下劃線'，你回答'你可以使用邊界，而不是'??? –

我已經添加了這個繼承跨度的顏色，這是你想要的，而不是在下劃線中使用HEX。 請注意，這是SCSS。

CSS Color Module - 4.4。 currentColor顏色關鍵字

CSS1和CSS2定義的邊框顏色屬性的初始值是色彩屬性的值，但沒有限定相應的關鍵詞。這個省略被SVG識別，因此， SVG 1.0引入了填充，描邊， stop-color，flood-color和lighting-color屬性的currentColor值。

CSS3將顏色值擴展爲包含currentColor關鍵字允許其與接受值的所有屬性一起使用。這個簡化了CSS3中這些屬性的定義。

搗鼓你

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

來源

2016-07-20 12:36:04

-2

有幾個方法可以做到這最好的方式是創建一個類（在CSS）和設置顏色有第二種方法是在這裏插入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>

來源

2016-07-20 12:37:33

這似乎並不符合要求。這突出顯示，而不是設置文本顏色，並且它一次只能完成一半的錨標記，而不是一次完成雙方。 –

多個下劃線顏色在一個錨點

回答

相關問題