1018

Ho un caso in cui devo scrivere un codice CSS in linea e voglio applicare uno stile hover su un'ancora.

Come posso usare a:hoverinline CSS all'interno dell'attributo di stile HTML?

Ad esempio, non è possibile utilizzare in modo affidabile le classi CSS nelle e-mail HTML.

html css inline-styles

— Amr Elgarhy
fonte

24

Incorporare html nelle applicazioni di blog richiede spesso anche l'uso esclusivo di stili in linea. Soprattutto se si sta incorporando l'html attraverso un client di terze parti e non si ha accesso ai temi dell'utente.

— provvidenza,

8

C'è uno standard CSS proposto per questo; non ho idea di quale tipo di supporto browser potrebbe avere (suggerimento: potrebbero utilizzare i tag personalizzati come -moz, ecc.): w3.org/TR/2002/WD-css-style-attr-20020515

— Kato

1

possibile duplicato di È possibile creare pseudo stili in linea?

— Synetech,

17

Oh andiamo. A volte stai solo costruendo un prototipo di landing page e non vuoi andare a biforcare i fogli di stile o creare un nuovo ramo di modello o qualsiasi altra cosa solo per testare se il pulsante verde funziona meglio. Sheesh.

— ElBel,

1

@FriendlyNeighborIdiot Questa pagina ha 13 anni, da allora la bozza è stata abbandonata.

— Tofandel,

573

Risposta breve: non puoi.

Risposta lunga: non dovresti.

Dagli un nome di classe o un ID e usa i fogli di stile per applicare lo stile.

:hoverè uno pseudo-selettore e, per i CSS , ha significato solo all'interno del foglio di stile. Non esiste alcun equivalente in stile in linea (in quanto non definisce i criteri di selezione).

Risposta ai commenti del PO:

Vedi Totally Pwn CSS con Javascript per un buon script sull'aggiunta dinamica di regole CSS. Vedi anche Cambia foglio di stile per alcune delle teorie sull'argomento.

Inoltre, non dimenticare, puoi aggiungere collegamenti a fogli di stile esterni se questa è un'opzione. Per esempio,

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

Attenzione: quanto sopra presuppone che ci sia una sezione di testa .

— Jonathan Fingland
fonte

4

puoi aggiungere classi css in javascript

— Jonathan Fingland il

204

Ci sono altre circostanze in cui il CSS inline è l' unica opzione, come le e-mail HTML (ad es. Gmail ignora il CSS a meno che non sia in linea). Sfortunatamente con Javascript messo a nudo anche nella maggior parte dei client di posta elettronica non ho ancora trovato il modo di aggiungere: effetti hover.

— Simon East,

24

@Kato mentre questo è un ottimo collegamento, e vorrei davvero che funzionasse, purtroppo non lo fa. Giusto per confermare, ho testato usando la sintassi style="{color:green;} :hover { color: red; }"e firefox è riuscito a colorare il link in verde, ma ho ignorato l'hover. Chrome ha ignorato entrambi. I test continui sarebbero piuttosto inutili.

— Jonathan Fingland,

9

Non l'ho dichiarato come una soluzione funzionante. Ho affermato che non era "del tutto" corretto affermare che non esiste un equivalente in linea e che gli pseudo-selettori non hanno alcun significato al di fuori dei fogli di stile. Com'è inappropriato?

— Kato,

5

Perché la risposta è lunga Non dovresti ... tu ... non dovresti generalizzare. Stavo cercando di inviare messaggi di posta elettronica con HTML, ma indovina cosa ... Gmail rimuove tutti i tag di stile, tutti i riferimenti di stile esterni e tutti gli script. Quindi ... c'è un modo per modellare il colore al passaggio del mouse all'interno dei messaggi di posta elettronica inviati a Gmail? Spero che lo faccia ... la speranza è l'ultima a morire !!! =)

— Miguel Angelo,

435

Puoi ottenere lo stesso effetto modificando i tuoi stili con JavaScript nei parametri onMouseOvere onMouseOut, sebbene sia estremamente inefficiente se devi cambiare più di un elemento:

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>

Espandi frammento

Inoltre, non ricordo per certo se thisfunziona in questo contesto. Potrebbe essere necessario cambiarlo con document.getElementById('idForLink').

— Alex S
fonte

12

è intelligente! Funziona anche per un effetto di passaggio del colore di sfondo<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...

— mxro

46

Devo ridere di questo essere visto come "intelligente" :) È difficile immaginare che alcune persone non fossero in giro quando questo era il modo principale / unico per ottenere questo effetto. O peggio ancora, per avere una 'immagine' e scambiarla, solo per dare l'effetto 'hover'. Mi fa sentire vecchio! Ma basti dire che risponde alla domanda del PO :)

— Manachi,

5

Devo essere d'accordo con Manachi su questo. Questo è come un flashback a javascript di geocities degli anni '90; P

— Eric Castro,

9

Vecchio, nuovo, antico o avanti. Ha risposto alla domanda e mi ha aiutato. Grazie, @peter.

— user2060451

4

Ho dovuto farlo per una e-mail e ha funzionato. Grazie! Questo in realtà risolve la domanda, a differenza della risposta accettata.

— theUtherSide

53

Potresti farlo ad un certo punto in passato. Ma ora (secondo l'ultima revisione dello stesso standard, che è la Raccomandazione dei candidati) non puoi.

— fuddin
fonte

3

tutte le altre risposte hanno detto che non è possibile, ma la tua mostra che è possibile, la tua risposta è diversa, la sto testando.

— Amr Elgarhy,

2

Siamo spiacenti, ho appena controllato la data dell'articolo. Ha 10 anni. Quindi non vi è alcuna garanzia che funzioni. Se lo fa, per favore, dimmelo anche tu.

— fuddin,

2

Ho provato questo:

<a href="http://www.w3.org/"           style="{color: #900}           :link {background: #ff0}           :visited {background: #fff}           :hover {outline: thin red solid}           :active {background: #00f}">...</a>

ma non ha funzionato

— Amr Elgarhy il

5

Nel caso qualcuno si imbatte in questa risposta, di chi ha risposto ha registrato una domanda su questa funzione qui: stackoverflow.com/questions/9884182/...

— BoltClock

9

Più esatto dire, si potrebbe farlo ad un certo punto nel passato. Ma ora (secondo l'ultima revisione dello stesso standard, che è la Raccomandazione del candidato) non puoi .

— Ilya Streltsyn,

34

Sto contribuendo molto tardi a questo, tuttavia ero triste nel vedere che nessuno lo ha suggerito, se in realtà hai bisogno di un codice incorporato, è possibile farlo. Ne avevo bisogno per alcuni pulsanti hover, il metodo è questo:

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}

<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a

Espandi frammento

In questo caso, il codice incorporato: "background-color: red;" è il colore dell'interruttore al passaggio del mouse, inserisci il colore che ti serve e quindi questa soluzione funziona. Mi rendo conto che questa potrebbe non essere la soluzione perfetta in termini di compatibilità, tuttavia funziona se è assolutamente necessario.

— lukesrw
fonte

4

Grazie. È un'ottima risposta, penso che questa risposta debba essere una soluzione.

— Hovhannes Sargsyan,

64

No, OP ha dichiarato di volerlo nel CSS incorporato all'interno dell'attributo HTML style .

— jj_

3

Lo so, jj_- tuttavia questo metodo ti consente di inserire solo poche righe nel CSS e di usarlo più volte in molti luoghi, molte persone (incluso me stesso) hanno scoperto che questa è un'alternativa utile.

— lukesrw,

2

questa dovrebbe essere la risposta effettiva, con una leggera modifica: non impostare nessuno dei colori nello stile, solo la regola da ereditare dal genitore quando si passa il mouse, quindi impostare i due colori in linea.

— Hayko Koryun,

4

Questo è solo il modo "normale" di farlo, che tutti dicevano sia il modo giusto. Tuttavia non è un modo in linea, che era la richiesta originale OP.

— wcndave,

31

Non puoi fare esattamente quello che stai descrivendo, poiché a:hoverfa parte del selettore, non delle regole CSS. Un foglio di stile ha due componenti:

selector {rules}

Gli stili in linea hanno solo regole; il selettore è implicito come l'elemento corrente.

Il selettore è un linguaggio espressivo che descrive un insieme di criteri per abbinare elementi in un documento simile a XML.

Tuttavia, puoi avvicinarti, perché un styleset può tecnicamente andare quasi ovunque:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>

— Rex M
fonte

3

In realtà non puoi: "HTML consente un numero qualsiasi di elementi STYLE nella sezione HEAD di un documento." ( w3.org/TR/html4/present/styles.html#edef-STYLE )

— Éric Araujo

2

Funziona sulla mia macchina. Grazie!

— Josh Habdas,

@ ÉricAraujo: quindi avvolgi tutto il contenuto sotto un <html> </html>tag

— fuddin

30

usando Javascript:

a) Aggiunta di uno stile in linea

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b) o un metodo un po 'più difficile - aggiunta di "mouseover"

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

Nota: gli stili a più parole (cioè font-size) in Javascript sono scritti insieme :

element.style.fontSize="12px"

— T.Todua
fonte

3

Dal momento che questa risposta è stata modificata, ora sembra completamente irrilevante per la domanda originale ...

— Bill

1

Wow, questo è fuori dagli schemi ... lo adoro!

— theglossy1

14

Questo è il miglior esempio di codice:

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>

Espandi frammento

Suggerimento del moderatore: mantieni la tua separazione delle preoccupazioni.

HTML

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>

Espandi frammento

JS

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}

Espandi frammento

— user1476842
fonte

10

Le dichiarazioni di pseudoclasse incorporate non sono supportate nell'attuale iterazione dei CSS (anche se, da quello che ho capito, potrebbe venire in una versione futura).

Per ora, la tua scommessa migliore è probabilmente quella di definire un blocco di stile direttamente sopra il link che vuoi modellare:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

— inkedmn
fonte

4

Quell'idea verrà fortunatamente abbandonata. (Vedi lists.w3.org/Archives/Public/www-style/2009Jun/0341.html , alla voce " Abbozzi di lavoro abbandonati".)

— Ms2ger,

3

C'è un . manca in questa risposta.

— Gioele

9

Come sottolineato, non è possibile impostare stili incorporati arbitrari per il passaggio del mouse, ma è possibile modificare lo stile del cursore al passaggio del mouse nei CSS utilizzando quanto segue nel tag appropriato:

style="cursor: pointer;"

— Rutherford
fonte

2

quella dovrebbe essere la migliore risposta

— Vladislav Guleaev il

6

<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover è una pseudo classe e quindi non può essere applicato con un attributo di stile. Fa parte del selettore.

— Joel
fonte

2

@Derek nel caso in cui sia ancora interessante / per chiunque legga: "~ /" (tilde forward slash) è un riferimento lato server alla radice dell'applicazione nelle applicazioni web asp.net. (Ovviamente la radice dell'applicazione potrebbe essere una sottocartella). Il suo utilizzo qui non sarebbe stato corretto, quindi il motivo per cui la risposta è stata modificata da quando hai posto la domanda (sospetto).

— Chris,

5

Puoi farlo. Ma non negli stili in linea. È possibile utilizzare onmouseovered onmouseouteventi:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>

Espandi frammento

4

Secondo i tuoi commenti, stai comunque inviando un file JavaScript. Esegui il rollover in JavaScript. Il metodo di jQuery$.hover() lo rende semplice, come ogni altro wrapper JavaScript. Neanche JavaScript è semplice.

— Vineel Shah
fonte

Mentre questo è un lavoro in giro ma sembra un'ottima risposta per me e la migliore risposta se davvero non è possibile scrivere in linea hover

— Amr Elgarhy,

4

Non c'è modo di farlo. Le opzioni disponibili sono utilizzare un blocco JavaScript o CSS.

Forse esiste una libreria JavaScript che convertirà un attributo di stile proprietario in un blocco di stile. Ma poi il codice non sarà conforme allo standard.

— m_vitaly
fonte

2

Ho appena trovato una soluzione diversa.

Il mio problema: ho un <a>tag attorno ad alcune diapositive / visualizzatore di contenuti principali e <a>tag nel piè di pagina. Voglio che vadano nello stesso posto in IE, quindi l'intero paragrafo sarebbe sottolineato onHover, anche se non sono collegamenti: la diapositiva nel suo insieme è un collegamento. IE non conosce la differenza. Ho anche alcuni collegamenti reali nel mio piè di pagina che necessitano di sottolineatura e cambio di colore onHover. Ho pensato di dover allineare gli stili con i tag footer per cambiare il colore, ma i consigli di cui sopra suggeriscono che ciò è impossibile.

Soluzione: ho fornito ai collegamenti a piè di pagina due classi diverse e il mio problema è stato risolto. Sono stato in grado di avere il onHovercambio di colore in una classe, le diapositive onHovernon hanno alcun cambio / sottolineatura di colore e sono comunque riuscito ad avere gli HREFS esterni nel piè di pagina e le diapositive allo stesso tempo!

— Liz
fonte

1

Sono d'accordo con l' ombra . È possibile utilizzare l' evento onmouseovere onmouseoutper modificare il CSS tramite JavaScript.

E non dire che le persone devono avere JavaScript attivato. È solo un problema di stile, quindi non importa se ci sono alcuni visitatori senza JavaScript;) Sebbene la maggior parte del Web 2.0 funzioni con JavaScript. Vedi Facebook per esempio (molti JavaScript) o Myspace .

— Jaysn
fonte

0

Questo è abbastanza tardi nel gioco, ma quando useresti JavaScript in un'e-mail HTML? Ad esempio, presso l'azienda per cui lavoro attualmente (fa rima con Abodee), utilizziamo il minimo comune denominatore per la maggior parte delle campagne di email marketing e JavaScript non viene utilizzato. Mai. A meno che non ti riferisca a una sorta di pre-elaborazione.

Come menzionato in un post correlato: "Lotus Notes, Mozilla Thunderbird, Outlook Express e Windows Live Mail sembrano supportare una sorta di esecuzione JavaScript. Nient'altro."

Link all'articolo da cui è stato tratto: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

Inoltre, come si tradurrebbe il passaggio del mouse su dispositivi mobili? Ecco perché mi piace la risposta dall'alto:Long answer: you shouldn't.

Se qualcuno ha ulteriori approfondimenti su questo argomento, non esitate a correggermi. Grazie.

— Shawn Spencer
fonte

0

Quindi questo non è esattamente ciò che l'utente stava cercando, ma ho trovato questa domanda alla ricerca di una risposta e ho trovato qualcosa di simile. Avevo un sacco di elementi ripetitivi che avevano bisogno di un nuovo colore / passaggio del mouse per una scheda al loro interno. Uso il manubrio, che è la chiave della mia soluzione, ma possono funzionare anche altri linguaggi di template.

Ho definito alcuni colori e li ho passati nel modello del manubrio per ogni elemento. Nella parte superiore del modello ho definito un tag di stile e ho inserito la mia classe personalizzata e il colore al passaggio del mouse.

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

Quindi ho usato lo stile nel modello:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

Potrebbe non essere necessario il !important

— webhound
fonte

0

puoi scrivere un codice di vario tipo

per prima cosa posso scrivere questo

html

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

css

.one{
  text-decoration: none;
}

puoi provare in un altro modo

html

<a href="https://www.google.com/" class="one">Hello siraj</a>

css

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

puoi anche provare a passare il mouse su jquery

script java

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

html

<p>Hover the mouse pointer over this paragraph.</p>

in questo codice hai una funzione tre in jquery prima hai pronto una funzione che è la base della funzione di jquery poi secondo hai una funzione hover in questa funzione quando passi un puntatore al testo il colore verrà cambiato e poi il prossimo il momento in cui rilasci il puntatore al testo sarà di colore diverso e questa è la terza funzione

— Siraj Ahmed
fonte

Si prega di evitare di pubblicare risposte duplicate

— Simas Joneliunas il

ok signore simas-joneliunas

— Siraj Ahmed

Nessuno di questi approcci risolve il problema espresso nella domanda. Non è possibile utilizzare JS in un'e-mail in formato HTML e l'altro approccio suggerito utilizza le classi che sono esplicitamente escluse.

— Quentin

0

Ora è possibile con Hacss .

— Nick Saunders
fonte

-1

Ho dovuto evitare javascript, ma potevo andare con il codice lato server.

così ho generato un id, creato un blocco di stile, generato il collegamento con quell'id. Sì, è un codice HTML valido.

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>

Espandi frammento

— BananaAcid
fonte

-2

Puoi usare la pseudo-classe solo a:hovernei fogli di stile esterni. Pertanto consiglio di utilizzare un foglio di stile esterno. Il codice è:

a:hover {color:#FF00FF;}   /* Mouse-over link */

— user1466310
fonte

Sicuramente non hai bisogno di fogli esterni, basta usare il styletag.

— Dmitri Zaitsev

-2

Puoi fare un id aggiungendo una classe ma mai in linea.

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 righe ma puoi riutilizzare la classe ovunque.

— insetto
fonte

-3

Il mio problema era che sto costruendo un sito Web che utilizza molte icone di immagini che devono essere scambiate da una diversa immagine al passaggio del mouse (ad esempio, le immagini blu-blu diventano rosse al passaggio del mouse). Ho prodotto la seguente soluzione per questo:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}

<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

Ho introdotto un contenitore contenente la coppia di immagini. Il primo è visibile e l'altro è nascosto (display: nessuno). Quando si passa con il mouse sul contenitore, il primo viene nascosto (display: nessuno) e il secondo viene nuovamente visualizzato (display: blocco).

— Jochem Geussens
fonte

Come scrivere un: hover in CSS inline?

usando Javascript: