Question Comment écrire un: hover inline CSS?


J'ai un cas où je dois écrire du code CSS en ligne, et je veux appliquer un style hover sur une ancre.

Comment puis-je utiliser a:hover dans CSS en ligne à l'intérieur de l'attribut de style HTML?

Par exemple. vous ne pouvez pas utiliser de manière fiable les classes CSS dans les e-mails HTML.


800
2018-06-23 15:07


origine


Réponses:


Réponse courte: vous ne pouvez pas.

Réponse longue: vous ne devriez pas.

Donnez-lui un nom de classe ou un id et utilisez des feuilles de style pour appliquer le style.

:hover est un pseudo-sélecteur et, pour CSS, n'a de sens que dans la feuille de style. Il n'y a pas d'équivalent en ligne (car il ne définit pas les critères de sélection).

Réponse aux commentaires du PO:

Voir Totalement Pwn CSS avec Javascript pour un bon script sur l'ajout dynamique de règles CSS. Regarde aussi Changer la feuille de style pour une partie de la théorie sur le sujet.

Aussi, n'oubliez pas, vous pouvez ajouter des liens vers des feuilles de style externes si c'est une option. Par exemple,

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

Attention: ce qui précède suppose qu'il y a un tête section.


464
2018-06-23 15:09



Vous pouvez obtenir le même effet en changeant vos styles avec JavaScript dans le onMouseOver et onMouseOut paramètres, bien qu'il soit extrêmement inefficace si vous devez changer plus d'un élément:

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

En outre, je ne me souviens pas si this travaille dans ce contexte. Vous devrez peut-être changer avec document.getElementById('idForLink').


334
2018-06-23 15:16



Plus précis à dire, vous pourriez le faire à un moment donné dans le passé. Mais maintenant (selon la dernière révision de la même norme, qui est la recommandation du candidat), vous ne pouvez pas     ...


44
2018-03-27 05:59



Je suis extrêmement en retard contribuant à ceci, cependant j'étais triste de voir que personne n'a suggéré ceci, si vous exigez réellement le code en ligne, ceci est possible de faire. J'en avais besoin pour quelques boutons, la méthode est la suivante:

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

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

Dans ce cas, le code en ligne: "background-color: red;" est la couleur de l'interrupteur en vol stationnaire, mettre la couleur dont vous avez besoin là-bas et cette solution fonctionne. Je me rends compte que ce n'est peut-être pas la solution parfaite en termes de compatibilité, mais cela fonctionne si c'est absolument nécessaire.


32
2017-08-10 09:41



Vous ne pouvez pas faire exactement ce que vous décrivez, puisque a:hover fait partie du sélecteur, pas les règles CSS. Une feuille de style a deux composants:

selector {rules}

Les styles en ligne ont seulement des règles; le sélecteur est implicite pour être l'élément courant.

Le sélecteur est un langage expressif qui décrit un ensemble de critères pour faire correspondre des éléments dans un document de type XML.

Cependant, vous pouvez vous rapprocher, car un style ensemble peut techniquement aller le plus partout:

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

26
2018-06-23 15:10



1) Ajouter un style en ligne en utilisant Javascript:

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

ou une méthode un peu plus difficile:

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',''); };

2) styles multi-mots en Javascript:

element.style.fontSize="12px"


24
2017-07-22 08:33



Les déclarations de pseudo-lettres en ligne ne sont pas supportées dans l'itération courante de CSS (bien que, d'après ce que je comprends, il puisse venir dans une future version).

Pour l'instant, votre meilleur pari est probablement de simplement définir un bloc de style directement au-dessus du lien que vous voulez styler:

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

10
2018-06-23 15:11



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

Hover est une classe de pseudo, et ne peut donc pas être appliqué avec un attribut de style. Cela fait partie du sélecteur.


4
2018-06-23 15:10