Style en ligne pour agir comme: survoler dans CSS

90

Je sais que l'incorporation de styles CSS directement dans les balises HTML qu'ils affectent va à l'encontre d'une grande partie de l'objectif de CSS, mais parfois c'est utile à des fins de débogage, comme dans:

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

Quelle est la syntaxe pour incorporer une règle comme:

a:hover {text-decoration: underline;}

dans l'attribut style d'une balise A? Ce n'est évidemment pas ça ...

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

... puisque cela s'appliquerait tout le temps, par opposition à juste pendant le survol.

html css Raldi
la source
Théoriquement, si vous essayez de rendre le survol quelque chose de dynamique, vous pouvez utiliser javascript pour injecter une règle de survol dans une feuille de style en utilisant la liste window.document.styleSheets des feuilles existantes.
GAgne
Voir aussi stackoverflow.com/questions/5293280/…
rogerdpack

Réponses:

95

J'ai bien peur que cela ne puisse pas être fait, les sélecteurs de pseudo-classes ne peuvent pas être définis en ligne, vous devrez le faire sur la page ou sur une feuille de style.

Je devrais mentionner que techniquement, vous devriez pouvoir le faire selon les spécifications CSS , mais la plupart des navigateurs ne le prennent pas en charge

Edit: Je viens de faire un test rapide avec ceci:

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

Et cela ne fonctionne pas dans IE7, IE8 beta 2, Firefox ou Chrome. Quelqu'un d'autre peut-il tester dans d'autres navigateurs?

Glenn Slaven
la source
3
C'est un projet de travail CSS 3 de très faible priorité qui n'a pas été mis à jour depuis six ans. D'après la spécification: «Il est inapproprié d'utiliser les brouillons de travail du W3C comme matériel de référence ou de les citer autrement que comme« travail en cours ». '
Jim
1
C'est vrai, mais les navigateurs implémentent certaines règles CSS3, devrait être probablement le mauvais mot dans ce contexte
Glenn Slaven
Les navigateurs implémentent généralement des fonctionnalités CSS qui sont dans un état de développement ultérieur, par exemple l'opacité provient de CSS Color (Last Call) et Media Queries est une recommandation candidate.
Jim
Style = ": hover {}" ne serait-il pas équivalent à "a {: hover {}}" dans la feuille de style? C'est évidemment une erreur de syntaxe.
Kornel
32
Cette réponse a été publiée il y a très longtemps, les choses ont changé depuis et la version actuelle de la spécification W3C pertinente - CSS Style Attribute Rec. ( w3.org/TR/css-style-attr/#syntax ) - indique clairement que l'attribut style ne peut contenir que le contenu d'un bloc de déclaration CSS. Il est donc désormais impossible d'insérer des pseudo éléments avec styleattribut.
Ilya Streltsyn le
24

Si vous ne faites que déboguer, vous pouvez utiliser javascript pour modifier le css:

<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>
Aleksi Yrttiaho
la source
1
J'ai recherché une solution avec JSF et cela m'a aidé à le réparer. onmousemove = "this.style.color = '## {cc.attrs.color}';" onmouseout = "this.style.color = 'blanc';"
kdoteu
17

Une solution simple:

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

Ou

<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
la source
16

Si c'est pour le débogage, ajoutez simplement une classe css pour le survol (puisque les éléments peuvent avoir plus d'une classe):

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

<a href="http://example.com" class="foo bar hovertest">blah</a>
Rodrick Chapman
la source
2
C'est probablement ce qui se rapproche le plus de l'effet souhaité
Glenn Slaven
1

J'ai mis en place une solution rapide pour tous ceux qui souhaitent créer des popups de survol sans CSS en utilisant les comportements onmouseover et 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
la source
0

Si cette <p>balise est créée à partir de JavaScript, vous avez une autre option: utilisez JSS pour insérer par programme des feuilles de style dans l'en-tête du document. Cela prend en charge '&:hover'. https://cssinjs.org/

michielbdejong
la source
-2

Je ne pense pas que jQuery charge les pseudo-sélecteurs non plus, mais il fournit un moyen rapide d'ajouter des événements à un, plusieurs ou tous vos contrôles et balises similaires sur une seule page.

Mieux encore, vous pouvez enchaîner les liaisons d'événements et tout faire dans une seule ligne de script si vous le souhaitez. Beaucoup plus facile que de modifier manuellement tout le HTML pour les activer ou les désactiver. Là encore, puisque vous pouvez faire la même chose en CSS, je ne sais pas que cela vous achète quoi que ce soit (à part apprendre jQuery).

CMPalmer
la source