Style en ligne pour agir comme: survoler dans CSS

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.

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?

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>

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>

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>

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>

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/

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