De style en ligne pour agir comme :hover en CSS

Je sais que l'incorporation de styles CSS directement dans les balises HTML, elles affectent défaites beaucoup de la fin de CSS, mais c'est parfois utile pour des fins de débogage, comme dans:

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

Quelle est la syntaxe pour l'incorporation d'une règle comme:

a:hover {text-decoration: underline;}

dans l'attribut style de la balise? Il n'est évidemment pas ce...

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

...parce que ce serait appliquer tout le temps, par opposition à seulement pendant le vol stationnaire.

  • Théoriquement, si vous essayez de faire le hover quelque chose de dynamique, vous pouvez utiliser javascript pour injecter un hover règle dans une feuille de style à l'aide de la fenêtre.document.les feuilles de style de la liste des feuilles.
  • Voir aussi stackoverflow.com/questions/5293280/...
InformationsquelleAutor raldi | 2008-09-25
  1. 87

    Je crains que ça ne peut pas être fait, le pseudo-sélecteurs de classe ne peut pas être jeu en ligne, vous devrez le faire sur la page ou sur une feuille de style.

    Je dois mentionner que techniquement vous devrait être en mesure de le faire en CSS, mais la plupart des navigateurs ne le supportent pas

    Edit: j'ai juste fait 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 il ne fonctionne pas dans IE7, IE8 beta 2, Firefox ou Chrome. Une autre personne peut test dans tout les autres navigateurs?

    • C'est une priorité très basse CSS 3 du projet de travail qui n'a pas été mis à jour en six ans. À partir de la spécification: "Il est inapproprié d'utiliser W3C Working draft comme matériel de référence ou à les citer comme autres que les "travaux en cours". '
    • Vrai, mais les navigateurs ne mettre en œuvre certaines règles CSS3, doit est probablement pas le bon mot dans ce contexte
    • En général, les navigateurs mettre en œuvre des fonctionnalités CSS qui sont dans un autre etat, par exemple, l'opacité est de Couleurs CSS (Dernier Appel) et les Requêtes de Média est un Candidat de la Recommandation.
    • Ne serait pas style=":hover {}" équivalent à "a { :hover {} }" dans la feuille de style? C'est évidemment une erreur de syntaxe.
    • Cette réponse a été posté il ya très longtemps, les choses ont changé depuis, et la version actuelle de la W3C spec — CSS Attribut de Style Rec. (w3.org/TR/css-style-attr/#syntax) — clairement dit que le style attribut peut contenir le contenu d'un seul CSS bloc de déclaration. Il est donc désormais impossible d'insérer des éléments pseudo avec style attribut.
    InformationsquelleAutor Glenn Slaven
  2. 21

    Si vous êtes seulement de débogage, vous pouvez utiliser javascript pour modifier le css:

    <a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>
    • Cherché une solution avec JSF et cela m'a aidé à le résoudre. onmousemove="ce.style.color='##{cc.attrs.couleur}';" onmouseout="this.style.color='white';"
    InformationsquelleAutor Aleksi Yrttiaho
  3. 16

    Si c'est pour le débogage, il suffit d'ajouter une classe css pour planant (car 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>
    • C'est probablement le plus proche, vous allez obtenir l'effet désiré
    InformationsquelleAutor Rodrick Chapman
  4. 12

    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>
    InformationsquelleAutor Roberto
  5. 1

    J'ai mis en place une solution rapide pour tous ceux qui veulent créer sensitif popups sans CSS à l'aide de la onmouseover et onmouseout comportements.

    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>
    InformationsquelleAutor Josh Kernich
  6. -2

    Je ne pense pas que jQuery prend en charge la pseudo-sélecteurs non plus, mais il fournit un moyen rapide pour ajouter des événements à un, de plusieurs ou de l'ensemble de vos contrôles similaires et des étiquettes sur une seule page.

    Le meilleur de tous, vous pouvez la chaîne de l'événement se lie et de tout faire en une seule ligne de script si vous le souhaitez. Beaucoup plus facile que de modifier manuellement tout le code HTML pour les activer ou les désactiver. Puis de nouveau, puisque vous pouvez faire la même chose dans le CSS je ne sais pas si il vous achète quelque chose (autre que l'apprentissage de jQuery).

    InformationsquelleAutor CMPalmer