html - style - text hover css




Comment écrire un: hover inline CSS? (12)

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"

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 dans l'attribut de style HTML?

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


C'est assez tard dans le jeu, mais quand utiliseriez-vous JavaScript dans un email HTML? Par exemple, pour 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 courriel - 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.

Lien vers l'article à partir duquel ceci a été pris: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

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

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


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

style="cursor: pointer;"

D'après vos commentaires, vous envoyez un fichier JavaScript quand même. Faites le survol en JavaScript. La $.hover() jQuery facilite la tâche, tout comme tous les autres wrappers JavaScript. Ce n'est pas trop dur en JavaScript non plus.


Je suis d'accord avec l' ombre . Vous pouvez utiliser l' 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 fonctionnent avec JavaScript. Voir Facebook par exemple (beaucoup de JavaScript) ou Myspace .


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.


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>

Mon problème était que je construisais un site Web qui utilise beaucoup d'icônes d'image qui doivent être permutées par une image différente en vol stationnaire (par exemple les images bleues deviennent rouges en vol stationnaire). 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 présenté un conteneur contenant la paire d'images. Le premier est visible et l'autre est caché (affichage: aucun). En survolant le conteneur, le premier devient caché (affichage: aucun) et le second apparaît à nouveau (affichage: bloc).


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.

: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 Totally Pwn CSS avec Javascript pour un bon script sur l'ajout dynamique de règles CSS. Voir 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 une section de head .


Vous ne pouvez pas faire exactement ce que vous décrivez, car a:hover fait partie du sélecteur, pas des 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 jeu de style peut techniquement aller le plus loin:

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

Vous pouvez obtenir le même effet en modifiant vos styles avec JavaScript dans les paramètres onMouseOver et onMouseOut , bien que ce 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 fonctionne dans ce contexte. Vous devrez peut-être le changer avec document.getElementById('idForLink') .


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

a:hover {color:#FF00FF;}   /* Mouse-over link */






inline-styles