28172 sujets

CSS et mise en forme, CSS3

Img:hover sous IE

bonjour,

je m'arrache les cheveux sur ce simple bout de code qui ne fonctionne pas chez moi sous IE 7 : pourquoi ?
en gros, ça consiste à changer le style de l'image quand on passe la souris dessus...

<html>
<head></head>
<body>
<style>
.toto:hover {
    border: thin dotted red;
}
</style>

<img class="toto" src='images/logo.jpg'>

</body>
</html>


Merci pour votre aide, si un moyen de contournement existe (mais impérativement par le style !) je suis preneur aussi !
Bonsoir zorino,

Même lorsqu'il s'agit d'un exemple simplifié, rien ne t'empêche (et tout t'encourage !) de(à) poster un code valide...je me suis même laissé dire que cela fonctionnait mieux ainsi...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="fr">
<head>
<title>Test hover</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css" media="screen">
<!--
.toto:hover {
    border: thin dotted red;
}
-->
</style>
</head>
<body>
<p>
<img class="toto" src='logo.png' alt="" height="" width="" />
</p>
</body>
</html>


A priori, IE7 semble accepter ce code, je te laisse comparer les différences Smiley cligne

Pour rappel, les versions inférieures à IE7 ne savent interpréter la pseudo-classe hover que lorsqu'elle est appliquée à une balise de lien <a> Smiley smile

Cdt,
Sylvain
Modifié par 6l20 (12 Oct 2008 - 10:25)
6l20 a écrit :
Bonsoir zorino,

Même lorsqu'il s'agit d'un exemple simplifié, rien ne t'empêche (et tout t'encourage !) de(à) poster un code valide...je me suis même laissé dire que cela fonctionnait mieux ainsi...


C'est gentiment dit et j'agrée ! Smiley smile Pardonne l'amateur STP Smiley confused

6l20 a écrit :

A priori, IE7 semble accepter ce code, je te laisse comparer ls différences Smiley cligne


Certes je les compare et m'interroge sur ce <!-- (sur lequel j'ai un peu de mal à trouver des infos sur Google !).
Ca ne signifie pas "commentaire" ? Est-ce ça qui fait la différence ?

Quelques lignes pour m'éclairer ne seraient pas superflues, je débute... Smiley ohwell

Merci pour ton aide !
Oups Smiley sweatdrop
Il n'y a aucun soucis, pardonnes si le ton a pu te faire croire qu'il s'agissait d'autre chose que de conseils Smiley cligne

Concernant les commentaires html (<!-- -->) dans les balises de styles, ils ont pour but de masquer les styles aux navigateurs Web plus anciens, qui ne connaissent pas les css, afin qu'ils n'interprètent pas par erreur le contenu de l'élément style comme du texte à afficher.

Il est d'usage d'appeller les feuilles de styles via la balise link (qui n'est pas n'ont plus interprétée par les navigateurs les plus anciens...)
<link rel="stylesheet" type="text/css" href="les styles.css">


Cdt,
Sylvain
Modifié par 6l20 (11 Oct 2008 - 23:50)
Bonjour,

A l'heure actuelle, Internet Explorer n'accepte les comportements de survol que sur les liens (balises <a>...</a>).
Espérons que IE8 implémentera cette fonctionnalité. Smiley cligne
Hello m'dame,

Cygnus a écrit :

Bonjour,
A l'heure actuelle, Internet Explorer n'accepte les comportements de survol que sur les liens (balises <a>...</a>).
Espérons que IE8 implémentera cette fonctionnalité. Smiley cligne


a écrit :

j'ai scribouillé un peu plus haut :

Pour rappel, les versions inférieures à IE7 ne savent interpréter la pseudo-classe hover que lorsqu'elle est appliquée à une balise de lien <a>

Il me semble que si le support de la pseudo-classe hover peut parfois être défectueux sur IE7, il est néanmoins implémenté et en grande partie fonctionnel Smiley cligne

Ou alors j'ai une version spéciale Smiley cool

Smiley cligne
6l20 a écrit :
Hello m'dame,
Il me semble que si le support de la pseudo-classe hover peut parfois être défectueux sur IE7, il est néanmoins implémenté et en grande partie fonctionnel Smiley cligne

Ou alors j'ai une version spéciale Smiley cool

Smiley cligne

Ah oui, tiens...
Je n'étais pas encore au courant. Smiley confused

Merci pour l'info Smiley cligne

Pour ceux qui maîtrisent l'anglais, voilà un petit lien utile : Getting :hover to Work in IE7 (en)
Cygnus a écrit :
Pour ceux qui maîtrisent l'anglais, voilà un petit lien utile : Getting :hover to Work in IE7 (en)

L'article donne une information erronée, à savoir qu'IE7 aurait besoin d'un Doctype «Strict» pour supporter la pseudo-classe :hover correctement. C'est faux. Par contre, cette fonctionnalité (et bien d'autres en CSS) ne fonctionneront qu'en mode de respect des standards (par opposition au mode Quirks). Un Doctype Transitional ou Frameset permet également de travailer en mode de respect des standards.
Florent V. a écrit :

L'article donne une information erronée, à savoir qu'IE7 aurait besoin d'un Doctype «Strict» pour supporter la pseudo-classe :hover correctement. C'est faux. Par contre, cette fonctionnalité (et bien d'autres en CSS) ne fonctionneront qu'en mode de respect des standards (par opposition au mode Quirks). Un Doctype Transitional ou Frameset permet également de travailer en mode de respect des standards.

Eh ben...
C'est vraiment pas ma journée !
J'vais p'têt aller me coucher, moi ! Smiley biggol
Sujet clos
Aller à