ho un link <a class="link-articles" href="#articles">My Articles</a>Come creare un collegamento sottolineato punteggiato al passaggio del mouse?
e il mio css .link-articles { text-decoration: underline; color: blue; }
Tuttavia, al passaggio del mouse vorrei avere al posto di sottolineatura blu una sottolineatura rossa, ma il testo deve rimanere blu e solo il cambiamento di colore di sottolineatura in rosso .
Come fare una cosa del genere?
Dal momento che non può denotare quale colore un secondo colore per la sottolineatura del testo, una strategia è quella di rimuoverlo e utilizzare un bordo.
.link-articles
{
border-bottom: solid 1px blue;
text-decoration: none;
}
.link-articles:hover
{
border-bottom-color: red;
}
Si noti che se si lascia la text-underline, si sposterà verso il basso quando si libra, dal momento che è il posizionamento non è esattamente la stessa posizione del bordo inferiore.
Questo approccio ha un vantaggio di poter
posizione sottolineatura utilizzando
hanno stili di linea alternativi, sostituendo line-height e
solid con dotted o dashed.
Approccio bordi:
Come @Pacerier sottolinea nei commenti, qui è una strategia alternativa utilizzando pseudo-classi e contenuti 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;
}
Tuttavia, con anti- aliasing, potrebbe avere un po 'di color-blending sui bordi del testo. Se non ti piace l'idea di dover inserire manualmente content nel tuo CSS, potresti usare un attributo o un elemento duplicato.
Utilizzare un bordo:
.link-articles { text-decoration: none; border-bottom: blue 1px solid; }
.link-articles:hover { border-bottom: red 1px dotted; }
Uso border-bottom:
a:hover.link-articles {border-bottom: 1px dotted red; text-decoration: none;}
Prova questo:
.link-articles{ text-decoration: none; border-bottom:1px dotted; border-color:blue; }
.link-articles:hover{ border-color:red; }
Lo stile :hover viene utilizzato per impostare lo stile quando l'utente posiziona il mouse sull'elemento.
.link-articles { ... }
.link-articles:hover { ... }
Ed è possibile utilizzare la proprietà border-bottom invece di text-decoration per lo styling punteggiata, tratteggiata e la larghezza.
Visualizza bordo inferiore al passaggio del mouse:
a.link-articles {
text-decoration: none;
border-bottom: 1px dotted blue;
}
a.link-articles:hover {
border-bottom: 1px dotted red;
}
Lo svantaggio di questo approccio è che la sottolineatura "si sposta" verso il basso quando si libra. jsfiddle.net/4dKFu – Quantastical
Ho risolto il problema creando un bordo inferiore trasparente. http://jsfiddle.net/4dKFu/1/ – Anoop
il tuo css è sbagliato ...: il filtro hover si trova su due punti ..:/ –
.link-articles { text-decoration: none; border-bottom: 1px dotted blue; }
.link-articles:hover { text-decoration: none; border-bottom: 1px dotted red; }
ha aggiornato la mia risposta: / –
È possibile utilizzare la proprietà CSS3 text-decoration-color, ma purtroppo, la proprietà text-decoration-color non è supportato in nessuno dei principali browser.
Firefox supporta un'alternativa, la proprietà -moz-text-decoration-color.
Riferimento: http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp
Supporto browser: http://caniuse.com/#search=text-decoration-color
JSFiddle (non funziona su tutti i browser)
Quindi il modo migliore per farlo è ancora l'utilizzo della proprietà border-bottom css come trucco.
Noi ** possiamo ** specificare il colore del testo sottolineato poiché sarà uguale al colore del testo. Per avere due colori diversi per il carattere e la sottolineatura, dobbiamo ** sovrapporre ** un nuovo testo sopra di esso, in modo che il vecchio colore del testo sia coperto dal nuovo colore del testo. – Pacerier
Grazie per aver chiarito, @Pacerier. Ho aggiornato la mia risposta per includere un approccio utilizzando le sovrapposizioni di testo. Personalmente, mi piace l'approccio border perché puoi perfezionare il posizionamento di esso usando 'line-height', e usando diversi stili di bordo come' punteggiato'. – Quantastical
Come esattamente la posizione della linea può essere controllata usando 'line-height'? Quando eseguo il test in Safari, la distanza della riga dal testo non è influenzata. Un'altezza di linea maggiore rispetto al testo circostante aumenta lo spazio sulla riga successiva. Un'altezza della linea più piccola non ha alcun effetto. La distanza del bordo dal testo non cambia mai. Forse funziona con altri browser, ma è utile solo in ambienti controllati come le intranet. –