Comment écrire un: hover en CSS inline?

1018

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

Comment puis-je utiliser a:hoverle CSS en ligne dans l'attribut de style HTML?

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

html css inline-styles Amr Elgarhy
la source
24
L'incorporation de code HTML dans les applications de blogging nécessite également souvent l'utilisation exclusive de styles en ligne. Surtout si vous intégrez le html via un client tiers et n'avez pas accès aux thèmes de l'utilisateur.
providence
8
Il existe une norme CSS proposée pour cela; aucune idée du type de support de navigateur qu'il pourrait avoir (indice: ils pourraient utiliser les balises personnalisées comme -moz, etc.): w3.org/TR/2002/WD-css-style-attr-20020515
Kato
1
doublon possible de Est-il possible de créer des pseudo styles en ligne?
Synetech
17
Oh allez. Parfois, vous construisez simplement un prototype de page de destination et vous ne voulez pas avoir à bifurquer les feuilles de style ou créer une nouvelle branche de modèle ou quoi que ce soit juste pour tester si le bouton vert fonctionne mieux. Sheesh.
ElBel
1
@FriendlyNeighborhoodIdiot Cette page a 13 ans, le projet a été abandonné depuis.
Tofandel

Réponses:

573

Réponse courte: vous ne pouvez pas.

Réponse longue: vous ne devriez pas.

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

:hoverest un pseudo-sélecteur et, pour CSS , n'a de sens 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 avec 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.

N'oubliez pas non plus, 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 une section de tête .

Jonathan Fingland
la source
4
vous pouvez ajouter des classes css en javascript
Jonathan Fingland
204
Il existe d'autres circonstances où le CSS en ligne est la seule option - comme les e-mails HTML (par exemple, Gmail ignore le CSS sauf s'il est en ligne). Malheureusement, avec Javascript supprimé dans la plupart des clients de messagerie, je n'ai pas encore trouvé de moyen d'ajouter: des effets de survol.
Simon East
24
@Kato, bien que ce soit un excellent lien, et je souhaite vraiment que cela fonctionne, malheureusement ce n'est pas le cas. Juste pour confirmer, j'ai testé en utilisant la syntaxe style="{color:green;} :hover { color: red; }"et firefox a réussi à colorer le lien en vert, mais j'ai ignoré le survol. Chrome a ignoré les deux. La poursuite des tests serait assez inutile.
Jonathan Fingland
9
Je ne l'ai pas présenté comme une solution de travail. J'ai déclaré qu'il n'était pas "entièrement" correct de dire qu'il n'y a pas d'équivalent en ligne et que les pseudo-sélecteurs n'ont aucune signification en dehors des feuilles de style. Comment est-ce inapproprié?
Kato
5
Pourquoi une réponse longue est Vous ne devriez pas ... vous ... vous ne devriez pas généraliser. J'essayais d'envoyer des messages électroniques avec du HTML, mais devinez quoi ... gmail supprime toutes les balises de style, toutes les références de style externes et tous les scripts. Alors ... existe-t-il un moyen de styliser la couleur des liens dans les e-mails envoyés à gmail? J'espère que c'est le cas ... l'espoir est le dernier à mourir !!! =)
Miguel Angelo
435

Vous pouvez obtenir le même effet en modifiant vos styles avec JavaScript dans les paramètres onMouseOveret onMouseOut, bien qu'il 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>
Développer l'extrait

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

Alex S
la source
12
c'est intelligent! Fonctionne également pour un effet de <div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
survol de la
46
Je dois rire de ce que l'on considère comme «intelligent» :) Il est difficile d'imaginer que certaines personnes n'étaient pas là quand c'était la seule / principale façon d'obtenir cet effet. Ou pire encore, pour avoir une «image» et devoir échanger l'image, juste pour donner l'effet «planer». Me fait me sentir vieux! Mais il suffit de dire que cela répond à la question du PO :)
Manachi
5
Je dois être d'accord avec Manachi sur celui-ci. C'est comme un flashback sur les géocités des années 90 javascript; P
Eric Castro
9
Ancien, nouveau, ancien ou à venir. Cela a répondu à la question et m'a aidé. Merci, @peter.
user2060451
4
J'avais besoin de le faire pour un e-mail et cela a fonctionné. Je vous remercie! Cela résout en fait la question, contrairement à la réponse acceptée.
theUtherSide
53

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.

fuddin
la source
3
toutes les autres réponses ont dit que ce n'était pas possible, mais la vôtre montre que c'est possible, votre réponse est différente, je la teste.
Amr Elgarhy
2
Désolé, je viens de vérifier la date de l'article. Ses 10 ans. Il n'y a donc aucune garantie que cela fonctionne. Si c'est le cas, dites-le moi aussi.
fuddin
2
J'ai testé ceci: <a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> Mais cela n'a pas fonctionné
Amr Elgarhy
5
Au cas où quelqu'un
trouverait
9
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 .
Ilya Streltsyn, le
34

Je suis extrêmement en retard pour contribuer à cela, mais j'étais triste de voir que personne ne l'a suggéré, si vous avez réellement besoin de code en ligne, c'est possible. J'en avais besoin pour certains 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
Développer l'extrait

Dans ce cas, le code en ligne: "background-color: red;" est la couleur du commutateur au survol, mettez la couleur dont vous avez besoin là-dedans, puis 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.

lukesrw
la source
4
Je vous remercie. C'est une excellente réponse, je pense que cette réponse doit être une solution.
Hovhannes Sargsyan
64
Non, OP a dit qu'ils le voulaient en CSS intégré dans l'attribut de style HTML .
jj_
3
Je sais, jj_- cependant cette méthode vous permet de mettre seulement quelques lignes dans le CSS et de l'utiliser à plusieurs reprises dans de nombreux endroits, beaucoup de gens (y compris moi-même) ont trouvé que c'était une alternative utile.
lukesrw
2
cela devrait être la réponse réelle, avec une légère modification: ne définissez aucune des couleurs dans le style, juste la règle à hériter du parent lorsqu'il est survolé, puis définissez les deux couleurs en ligne.
Hayko Koryun
4
C'est juste la façon "normale" de le faire, ce que tout le monde disait être la bonne. Cependant, ce n'est pas une méthode en ligne, ce qui était la demande originale de l'OP.
wcndave
31

Vous ne pouvez pas faire exactement ce que vous décrivez, car il a:hoverfait partie du sélecteur, pas des règles CSS. Une feuille de style a deux composants:

selector {rules}

Les styles en ligne n'ont que des règles; le sélecteur est implicitement l'élément courant.

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 rapprocher, car un styleensemble peut techniquement aller presque n'importe où:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>
Rex M
la source
3
En fait, vous ne pouvez pas: "HTML autorise n'importe quel nombre d'éléments STYLE dans la section HEAD d'un document." ( w3.org/TR/html4/present/styles.html#edef-STYLE )
Éric Araujo
2
Fonctionne sur ma machine. Merci!
Josh Habdas
@ ÉricAraujo: Enveloppez ensuite tout ce contenu sous une <html> </html>balise
fuddin
30

en utilisant Javascript:

a) Ajout d'un style en ligne 

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

b) ou une méthode un peu plus difficile - ajouter "survol"

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 (ie font-size) en Javascript sont écrits ensemble :

element.style.fontSize="12px"

T.Todua
la source
3
Depuis que cette réponse a été éditée, elle semble maintenant être complètement hors de propos pour la question d'origine ...
Bill
1
Wow, c'est penser hors des sentiers battus ... J'adore ça!
theglossy1
14

Ceci 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>
Développer l'extrait

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>
Développer l'extrait

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'
}
Développer l'extrait

user1476842
la source
10

Les déclarations de pseudoclasse 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 pourrait 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 souhaitez styliser:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
inkedmn
la source
4
Cette idée sera heureusement abandonnée. (Voir lists.w3.org/Archives/Public/www-style/2009Jun/0341.html , sous "Projets de travail abandonnés".)
Ms2ger
3
Il y a un . manquant dans cette réponse.
Joel
9

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

style="cursor: pointer;"
rutherford
la source
2
cela devrait être la meilleure réponse
Vladislav Guleaev
6 
<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. Il fait partie du sélecteur.

Joel
la source
2
@Derek en cas d'intérêt / pour toute autre personne lisant: "~ /" (barre oblique tilde) est une référence côté serveur à la racine de l'application dans les applications Web asp.net. (La racine de l'application peut bien sûr être un sous-dossier). Son utilisation ici n'aurait pas été correcte, d'où la raison pour laquelle la réponse a été modifiée depuis que vous avez posé la question (je suppose).
Chris
5

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

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


la source
4

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

Vineel Shah
la source
Bien que ce soit un travail autour, mais cela semble une très bonne réponse pour moi et la meilleure réponse si ce n'est vraiment pas possible d'écrire en vol stationnaire
Amr Elgarhy
4

Il n'y a aucun moyen de le faire. 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 aux normes.

m_vitaly
la source
2

Je viens de trouver une solution différente.

Mon problème: j'ai une <a>balise autour de certaines diapositives / visualiseur de contenu principal ainsi que des <a>balises dans le pied de page. Je veux qu'ils aillent au même endroit dans IE, donc tout le paragraphe serait 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 réels dans mon pied de page qui nécessitent le soulignement et le changement de couleur onHover. Je pensais que je devrais mettre les styles en ligne avec les balises de pied de page pour changer la couleur, mais les conseils ci-dessus suggèrent que cela est impossible.

Solution: J'ai donné aux liens de pied de page deux classes différentes et mon problème a été résolu. J'ai pu avoir le onHoverchangement de couleur dans une classe, avoir les diapositives onHoversans changement / soulignement de couleur, et toujours avoir le HREFS externe dans le pied de page et les diapositives en même temps!

Liz
la source
1

Je suis d'accord avec l' ombre . Vous pouvez utiliser l' événement onmouseoveret onmouseoutpour modifier le CSS via JavaScript.

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

Jaysn
la source
0

C'est assez tard dans le jeu, mais quand utiliseriez-vous JavaScript dans un e-mail HTML? Par exemple, dans l'entreprise pour laquelle je travaille actuellement (rime avec Abodee), nous utilisons le plus petit dénominateur commun pour la plupart des campagnes de marketing par e-mail - et JavaScript n'est tout simplement pas utilisé. Déjà. Sauf si vous faites référence à une sorte de 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 JavaScript. Rien d'autre ne le fait."

Lien vers l'article dont cela provient: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

De plus, comment le vol stationnaire se traduirait-il sur les appareils mobiles? C'est pourquoi j'aime la réponse d'en haut:Long answer: you shouldn't.

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

Shawn Spencer
la source
0

Donc, ce n'est pas tout à fait ce que l'utilisateur recherchait, mais j'ai trouvé cette question à la recherche d'une réponse et j'ai trouvé quelque chose de similaire. J'avais un tas d'éléments répétitifs qui avaient besoin d'une nouvelle couleur / survoler pour un onglet en leur sein. J'utilise le guidon, qui est la clé de ma solution, mais d'autres langages de modèles peuvent également fonctionner.

J'ai défini quelques 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 et mis ma classe personnalisée et ma couleur de survol.

<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

webhound
la source
0

vous pouvez écrire un code de différents types

je peux d'abord écrire ceci

html

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

css

.one{
  text-decoration: none;
}

vous pouvez essayer d'une autre manière

html

<a href="https://www.google.com/" class="one">Hello siraj</a>

css

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

vous pouvez également essayer de survoler en jquery

script java

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

html

<p>Hover the mouse pointer over this paragraph.</p>

dans ce code, vous avez une fonction à trois dans jquery d'abord, vous préparez une fonction qui est la base de la fonction de jquery, ensuite, vous avez une fonction de survol dans cette fonction lorsque vous survolez un pointeur sur le texte, la couleur sera modifiée, puis la suivante le lorsque vous relâchez le pointeur sur le texte, ce sera la couleur différente et c'est la troisième fonction

Siraj Ahmed
la source
Veuillez éviter de publier des réponses en double
Simas Joneliunas
ok monsieur simas-joneliunas
Siraj Ahmed
Aucune de ces approches ne résout le problème exprimé dans la question. Vous ne pouvez pas du tout utiliser JS dans un e-mail au format HTML, et l'autre approche que vous suggérez utilise des classes qui est explicitement exclue.
Quentin
-1

J'ai dû éviter le javascript, mais je pouvais aller avec du code côté serveur.

J'ai donc généré un identifiant, créé un bloc de style, généré le lien avec cet identifiant. Oui, son code HTML valide.

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>
Développer l'extrait

BananaAcid
la source
-2

Vous ne pouvez utiliser la pseudo-classe que a:hoverdans des feuilles de style externes. Par conséquent, je recommande d'utiliser une feuille de style externe. Le code est:

a:hover {color:#FF00FF;}   /* Mouse-over link */
user1466310
la source
Vous n'avez sûrement pas besoin de feuilles externes, utilisez simplement la stylebalise.
Dmitri Zaitsev
-2

Vous pouvez faire id en ajoutant une classe mais jamais en ligne.

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 lignes mais vous pouvez réutiliser la classe partout.

punaise
la source
-3

Mon problème était que je construis un site Web qui utilise beaucoup d'icônes d'images qui doivent être échangées par une image différente en survol (par exemple, les images bleues deviennent rouges en survolant). J'ai produit la solution suivante pour cela:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

J'ai introduit un conteneur contenant la paire d'images. Le premier est visible et l'autre est masqué (affichage: aucun). Lors du survol du conteneur, le premier devient masqué (affichage: aucun) et le second réapparaît (affichage: bloc).

Jochem Geussens
la source