Stile in linea per agire come: passa il mouse in CSS

90

So che l'incorporamento di stili CSS direttamente nei tag HTML influisce su gran parte dello scopo del CSS, ma a volte è utile per scopi di debug, come in:

<p style="font-size: 24px">asdf</p>

Qual è la sintassi per incorporare una regola come:

a:hover {text-decoration: underline;}

nell'attributo style di un tag A? Ovviamente non è questo ...

<a href="foo" style="text-decoration: underline">bar</a>

... poiché si applicherebbe sempre, invece che solo durante il passaggio del mouse.

html css

— raldi
fonte

Teoricamente, se stai cercando di rendere dinamico il passaggio del mouse, potresti utilizzare javascript per iniettare una regola di passaggio del mouse in un foglio di stile utilizzando l'elenco window.document.styleSheets dei fogli esistenti.

— GAgnew

Vedere anche stackoverflow.com/questions/5293280/...

— rogerdpack

95

Temo che non possa essere fatto, i selettori di pseudo-classe non possono essere impostati in linea, dovrai farlo sulla pagina o su un foglio di stile.

Devo dire che tecnicamente si dovrebbe essere in grado di farlo in base alle specifiche CSS , ma la maggior parte dei browser che non supportano

Modifica: ho appena fatto un rapido test con questo:

<a href="test.html" style="{color: blue; background: white} 
            :visited {color: green}
            :hover {background: yellow}
            :visited:hover {color: purple}">Test</a>

E non funziona in IE7, IE8 beta 2, Firefox o Chrome. Qualcun altro può eseguire test in altri browser?

— Glenn Slaven
fonte

3

È una bozza di lavoro CSS 3 con priorità molto bassa che non è stata aggiornata da sei anni. Dalla specifica: "Non è appropriato utilizzare i Working Draft del W3C come materiale di riferimento o citarli come diversi da" lavori in corso ". '

— Jim

1

Vero, ma i browser implementano alcune regole CSS3, dovrebbe essere probabilmente la parola sbagliata in questo contesto

— Glenn Slaven,

I browser in genere implementano le funzionalità CSS che sono in uno stato di ulteriore sviluppo, ad esempio l'opacità proviene da CSS Color (Last Call) e Media Queries è una raccomandazione candidata.

— Jim,

Style = ": hover {}" non sarebbe equivalente a "a {: hover {}}" nel foglio di stile? Questo ovviamente è un errore di sintassi.

— Kornel

32

Questa risposta è stata pubblicata molto tempo fa, le cose sono cambiate da allora e la versione corrente della specifica W3C pertinente - CSS Style Attribute Rec. ( w3.org/TR/css-style-attr/#syntax ) - dice chiaramente che l'attributo di stile può contenere solo il contenuto di un blocco di dichiarazione CSS. Quindi ora è impossibile inserire pseudo elementi con styleattributo.

— Ilya Streltsyn

24

Se stai solo eseguendo il debug, potresti usare javascript per modificare il css:

<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>

— Aleksi Yrttiaho
fonte

1

Ho cercato una soluzione con JSF e questo mi ha aiutato a risolverlo. onmousemove = "this.style.color = '## {cc.attrs.color}';" onmouseout = "this.style.color = 'white';"

— kdoteu

17

Una soluzione semplice:

   <a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>

O

<script>
 /** Change the style **/
 function overStyle(object){
    object.style.color = 'orange';
    // Change some other properties ...
 }

 /** Restores the style **/
 function outStyle(object){
    object.style.color = 'orange';
    // Restore the rest ...
 }
</script>

<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>

— Roberto
fonte

16

Se è per il debug, aggiungi semplicemente una classe CSS per il passaggio del mouse (poiché gli elementi possono avere più di una classe):

a.hovertest:hover
{
text-decoration:underline;
}

<a href="http://example.com" class="foo bar hovertest">blah</a>

— Rodrick Chapman
fonte

2

Questo è probabilmente il risultato più vicino che otterrai all'effetto desiderato

— Glenn Slaven,

1

Ho messo insieme una soluzione rapida per chiunque desideri creare popup al passaggio del mouse senza CSS utilizzando i comportamenti onmouseover e onmouseout.

http://jsfiddle.net/Lk9w1mkv/

<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>

— Josh Kernich
fonte

0

Se quel <p>tag viene creato da JavaScript, hai un'altra opzione: usa JSS per inserire in modo programmatico i fogli di stile nell'intestazione del documento. Supporta '&:hover'. https://cssinjs.org/

— michielbdejong
fonte

-2

Non penso nemmeno che jQuery supporti gli pseudo-selettori, ma fornisce un modo rapido per aggiungere eventi a uno, molti o tutti i controlli e i tag simili su una singola pagina.

Soprattutto, puoi concatenare i binding di eventi e fare tutto in una riga di script, se lo desideri. Molto più semplice che modificare manualmente tutto l'HTML per attivarli o disattivarli. Poi di nuovo, dal momento che puoi fare lo stesso in CSS, non so se ti compri qualcosa (a parte l'apprendimento di jQuery).

— CMPalmer
fonte