Wiele kolorów podkreślenia w jednej kotwicy

Chciałbym, w ramach jednej kotwicy </a>, mieć dwa różne kolory podkreślenia. Tak:Wiele kolorów podkreślenia w jednej kotwicy

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

mogę dodać text-decoration do każdego przęsła przy aktywowaniu ale powoduje to każdy wiersz unosić indywidualnie. Chcę, aby po umieszczeniu wskaźnika myszy w dowolnym miejscu w </a> obu przęsłach podkreślono odziedziczoną czcionkę color.

Czy to możliwe?

Uwaga: jestem świadomy text-decoration-color, ale z powodu ograniczenia wsparcia nie mogę go użyć.

Źródło

2016-07-20 Geraint

Jeżeli nie jesteś ograniczony do CSS, a następnie przyjrzeć http://letteringjs.com/ – Pureferret

Niektóre coś takiego? Możesz użyć pseudo klasy CSS kotwicy, aby nadać jej styl potomny i potomny.

Tutaj znajduje się odniesienie do selektorów CSS child i 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>

Źródło

2016-07-20 12:30:36 Pugazh

Za pomocą tego kodu i przełączanie 'border-bottom' z' text-decoration: underline' rozwiązałem moje pytanie. – Geraint

@Geraint Nie mogę odtworzyć tego, co zrobiłeś (zakładam, że robię coś źle). Czy mówisz zamiast "border-bottom: 1px solid red" masz "text-decoration: underline 1px solid red"? –

Niestety, nie powinno być wyraźniej, zamiast "border-bottom: 1px solid red" Zrobiłem "text-decoration: podkreślenie", to daje mi podkreślenie, gdy '' jest zawieszone i domyślnie zyskuje kolor zastosowany do przęsła – Geraint

Czy próbowałeś tego?

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

text-decoration: underline odziedziczy kolor czcionki automatycznie, więc jeśli przęsła są już szare/czerwone kolory, wszystko co musisz zrobić, to uczynić je podkreślić na unoszące się a

Źródło

2016-07-20 12:28:23 Forty

Można również spróbować. jeśli istnieje tak wiele span elementem

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>

Źródło

2016-07-20 12:32:41

Spróbuj

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>

Źródło

2016-07-20 12:32:41 Sree

Powinieneś użyć klasy zamiast identyfikatora. – Forty

@Forty: Obie są różne. Nie używam tego samego identyfikatora dla dwóch rozpiętości – Sree

OP pyta o 'podkreślenie', a ty odpowiadasz' możesz zamiast tego użyć ramki '??? –

Dodałem to do dziedziczenia koloru rozpiętości, która jest co chciałeś , zamiast używać HEX w podkreśleniu. Pamiętaj, że to SCSS.

Moduł kolorowy CSS - 4.4. currentcolor kolor kluczowe

CSS 1 i CSS 2 określona wartość początkową właściwości granicy kolorów jako wartość właściwości koloru, ale nie definiują odpowiedniego słowa kluczowego. To pominięcie zostało rozpoznane przez SVG, a zatem SVG 1.0 wprowadził wartość currentColor dla wypełnienia, obrysu, koloru zatrzymania, koloru powodziowego i właściwości koloru oświetlenia.

CSS3 rozszerza wartość koloru o słowo kluczowe currentColor do , umożliwiając jego użycie we wszystkich właściwościach, które akceptują wartość. Ten upraszcza definicję tych właściwości w CSS3.

Fiddle Ci

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

Źródło

2016-07-20 12:36:04

-2

istnieje kilka sposobów, aby to najlepszym sposobem jest stworzenie klasy (CSS) zrobić i ustawić kolor tam Drugi sposób to wstawienie CSS w kod html jak tutaj

.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>

Źródło

2016-07-20 12:37:33

To wydaje się nie spełniać wymagań. Podkreśla to zamiast ustawiania koloru tekstu, a także powoduje tylko połowę znacznika zakotwiczenia naraz, zamiast obu stron naraz. –

Wiele kolorów podkreślenia w jednej kotwicy

Odpowiedz

Powiązane problemy