web-dev-qa-db-fra.com

Comment écrire un: survoler dans CSS en ligne?

Dans certains cas, je dois écrire du code CSS intégré et je souhaite appliquer un style de survol sur une ancre.

Comment puis-je utiliser a:hover dans le CSS intégré dans l'attribut de style HTML?

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

htmlcssinline-styles
868
Amr Elgarhy

Réponse courte: vous ne pouvez pas.

Réponse longue: tu ne devrais pas. 

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

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

Réponse aux commentaires du PO:

Voir Totally Pwn CSS with Javascript pour un bon script sur l'ajout dynamique de règles CSS. Voir également Modifier la feuille de style pour une partie de la théorie sur le sujet.

De plus, n'oubliez pas que vous pouvez ajouter des liens vers des feuilles de style externes, le cas échéant. 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 existe une section head . 

497
Jonathan Fingland

Vous pouvez obtenir le même effet en modifiant vos styles avec JavaScript dans les paramètres onMouseOver et onMouseOut, bien que cela soit extrêmement inefficace si vous devez modifier plusieurs éléments:

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

De plus, je ne me souviens pas avec certitude si this fonctionne dans ce contexte. Vous devrez peut-être le changer avec document.getElementById('idForLink').

372
Alex S

Vous pouvez le faire à un moment donné dans le passé. Mais maintenant (selon la dernière révision de la même norme, recommandation candidate), vous ne pouvez pas .

48
Fahad Uddin

Je suis extrêmement en retard, mais je suis triste de voir que personne ne l'a suggéré. Si vous avez réellement besoin d'un code en ligne, c'est possible. J'en avais besoin pour quelques boutons de survol, 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 stationnaire, placez-y la couleur dont vous avez besoin et cette solution fonctionnera. 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
lukesrw

en utilisant Javascript:

a) Ajout de style en ligne 

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

b) ou une méthode un peu plus dure - en ajoutant "mouseover"

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

Remarque: les styles multi-mots (c'est-à-dire .font-size) sont écrits ensemble en Javascript :

element.style.fontSize="12px"

28
T.Todua

Vous ne pouvez pas faire exactement ce que vous décrivez, car 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 actuel.

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

Cependant, vous pouvez vous en approcher, car un ensemble style peut techniquement se déplacer n'importe où:

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

Les déclarations de pseudo-classes en ligne ne sont pas prises en charge dans l'itération actuelle de CSS (bien que, d'après ce que je comprends, cela puisse venir dans une version ultérieure).

Pour le moment, votre meilleur choix est probablement de simplement définir un bloc de style directement au-dessus du lien que vous souhaitez styler:

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

Comme indiqué, vous ne pouvez pas définir de styles en ligne arbitraires pour le survol, mais vous pouvez modifier le style du curseur de survol dans CSS en utilisant ce qui suit dans la balise appropriée:

style="cursor: pointer;"
7
rutherford

C'est le meilleur exemple de code:

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>

Suggestion du modérateur: Gardez votre séparation des préoccupations.

HTML 

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>

JS

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}

5
user1476842

Tu peux le faire. Mais pas dans les styles en ligne. Vous pouvez utiliser les événements onmouseover et onmouseout:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>

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

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

4
Joel

Il n'y a pas moyen de faire ça. Vos options sont d'utiliser un JavaScript ou un bloc CSS.

Il existe peut-être une bibliothèque JavaScript qui convertira un attribut de style propriétaire en un bloc de style. Mais alors le code ne sera pas conforme à la norme.

4
m_vitaly

Selon vos commentaires, vous envoyez quand même un fichier JavaScript. Faites le survol en JavaScript. La méthode $.hover() de/de jQuery facilite la tâche, comme tout autre wrapper JavaScript. Ce n'est pas trop dur en JavaScript non plus.

4
Vineel Shah

Je viens de trouver une solution différente. 

Mon problème: j'ai une balise <a> autour de certains visualiseurs de diapositives/contenu principal ainsi que des balises <a> dans le pied de page. Je veux qu'ils aillent au même endroit dans IE, pour que tout le paragraphe soit souligné onHover, même s'il ne s'agit pas de liens: la diapositive dans son ensemble est un lien. IE ne connaît pas la différence. J'ai également des liens dans mon pied de page qui nécessitent le soulignement et le changement de couleur onHover. Je pensais qu'il faudrait que les styles soient alignés avec les balises de pied de page pour modifier la couleur, mais les conseils ci-dessus suggèrent que c'est impossible. 

Solution: J'ai donné aux liens de bas de page deux classes différentes et mon problème a été résolu. J'ai pu avoir le changement de couleur onHover dans une classe, faire en sorte que les diapositives onHover ne subissent aucun changement de couleur/soulignement et pouvoir toujours avoir les HREFS externes dans le pied de page et les diapositives simultanément! 

2
Liz

Je suis d'accord avec shadow. Vous pouvez utiliser les événements onmouseover et onmouseout pour modifier le CSS via JavaScript. 

Et ne dites pas que les gens ont besoin d'activer JavaScript. C'est seulement un problème de style, donc peu importe s'il y a des visiteurs sans JavaScript;) Bien que la plupart des Web 2.0 fonctionne avec JavaScript. Voir Facebook par exemple (beaucoup de JavaScript) ou Myspace .

1
Jaysn

Je devais éviter javascript, mais je pouvais utiliser un code côté serveur.

alors j'ai généré un identifiant, créé un bloc de style, généré le lien avec cet identifiant. Oui, c'est valide HTML. 

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}
<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>

0
BananaAcid

Ce n’est donc pas tout à fait ce que l’utilisateur cherchait, mais j’ai trouvé cette question à la recherche d’une réponse et j’ai proposé quelque chose de similaire. J'ai eu un tas d'éléments répétitifs qui avaient besoin d'une nouvelle couleur/survol pour un onglet en leur sein. J'utilise le guidon, ce qui est essentiel pour ma solution, mais d'autres langages de modélisation peuvent également fonctionner. 

J'ai défini des couleurs et les ai passées dans le modèle de guidon pour chaque élément. En haut du modèle, j'ai défini une balise de style, puis ma couleur et mon survol personnalisés.

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

Ensuite, j'ai utilisé le style dans le modèle:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

Vous n'avez peut-être pas besoin du !important

0
webhound

C'est assez tard dans le jeu, mais quand utiliseriez-vous JavaScript dans un courriel HTML? Par exemple, dans l'entreprise pour laquelle je travaille actuellement (rimes avec Abodee), nous utilisons le plus petit dénominateur commun pour la plupart des campagnes de marketing par courriel - et JavaScript n'est tout simplement pas utilisé. Déjà. À moins que vous ne parliez d'un prétraitement.

Comme mentionné dans un article connexe: "Lotus Notes, Mozilla Thunderbird, Outlook Express et Windows Live Mail semblent tous prendre en charge une sorte d'exécution de JavaScript. Rien d'autre ne le fait."

Lien vers l'article d'où provient ce texte: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

En outre, comment traduirait-il sur les appareils mobiles? C'est pourquoi j'aime la réponse ci-dessus: Long answer: you shouldn't. 

Si quelqu'un a plus de perspicacités sur ce sujet, n'hésitez pas à me corriger. Je vous remercie.

0
Shawn Spencer