Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

IE et hover

0 views
Skip to first unread message

Bernd

unread,
Nov 7, 2008, 11:49:20 AM11/7/08
to
Bonjour,

J'ai cette ligne qui permet de modifier la déco d'un lien quand la
souris le survole.
li a span.taillemenu:hover{
font-weight: bold;
color:#999;
}

Or, comme vous savez, IE 6 et 7 ignorent cela.
Comment faire pour contourner cette lacune ? J'ai en effet besoin de
modifier l'allure de ce lien sans utiliser JS.

Merci.
--
A+

Romer

CrazyCat

unread,
Nov 7, 2008, 11:55:23 AM11/7/08
to

J'aurais plutôt mis la classe sur le lien et non sur le span:
li a.taillemenu span {
color: #ccc;
}

li a.taillemenu:hover {
font-weight: bold;
color: #999;
}

Mais je n'assure pas que ce soit juste

--
Réseau IRC Francophone: http://www.zeolia.net
Aide et astuces webmasters : http://www.c-p-f.org
Communauté Francophone sur les Eggdrops: http://www.eggdrop.fr

Olivier Miakinen

unread,
Nov 7, 2008, 12:20:37 PM11/7/08
to
Le 07/11/2008 17:49, Bernd a écrit :
>
> J'ai cette ligne qui permet de modifier la déco d'un lien quand la
> souris le survole.
> li a span.taillemenu:hover{
> font-weight: bold;

C'est une *TRÈS* mauvaise idée de changer la taille des caractères au
survol. Selon le cas cela peut induire un clignotement très désagréable
ou au pire empêcher carrément de cliquer sur certains liens. Parmi ce
qui change la taille, il y a les propriétés font-family, font-variant,
font-stretch et font-size, mais aussi font-style et font-weight.

> color:#999;

Pas de problème en revanche pour un changement de couleur.

> }
>
> Or, comme vous savez, IE 6 et 7 ignorent cela.

Je le savais pour IE6, mais pas pour IE7. Tu en es sûr ?

> Comment faire pour contourner cette lacune ? J'ai en effet besoin de
> modifier l'allure de ce lien sans utiliser JS.

Même avec les commentaires conditionnels propres à Internet Explorer, du
type <!--[if lt IE 7]>...<![endif]--> ?

Dominique Ottello

unread,
Nov 7, 2008, 1:57:36 PM11/7/08
to
ro...@bernd.invalid (Bernd) écrivait :

> Comment faire pour contourner cette lacune ? J'ai en effet besoin de
> modifier l'allure de ce lien sans utiliser JS.

Je modifie la couleur de mes liens, sans JS, par exemple sur
http://aviatechno.free.fr et voir les liens dans le texte, comme
« Crevette » ou Superstarliner L.1649 F-BHBO

D'autre part, les « menus » sont uniquement en CSS, sans JS.

Pour les liens, dans le fichier CSS :

a img {border:none;}

a,a:link,a:visited {color:#9E5500;font-style:normal;font-weight:bold;
text-decoration:none;font-size:0.95em;}

a:hover,a:focus {color:#FF8C00;text-decoration:underline;}
--
Aujourd'hui, l'idéal du progrès est remplacé par l'idéal de l'innovation :
il ne s'agit pas que ce soit mieux, il s'agit seulement que ce soit nouveau,
même si c'est pire qu'avant et cela de toute évidence. Montherlant
Technologie aéronautique - http://ottello.net - Les anciens de Vilgénis

Patrick 'Zener' Brunet

unread,
Nov 7, 2008, 2:05:56 PM11/7/08
to
Bonjour.

"Bernd" <ro...@bernd.invalid> a écrit dans le message de news:
1iq1qna.5gkhkc15jy94sN%ro...@bernd.invalid...

En cherchant dans mon IE, je n'ai pas trouvé comment désactiver JS, et de
toute manière je doute que les gens qui utilisent IE par facilité aient
envie de désactiver JS.

Donc le problème amha est de le faire sans imposer de solution avec JS pour
les autres navigateurs.

Ca se fait habituellement en rajoutant une propriété propriétaire behavior
qui attache un module HTC.
Pour ne pas casser la validation de la CSS, on fait ça avec les autres hacks
dans une CSS additionnelle réservée à IE, en utilisant les commentaires
spéciaux cités par O.Miakinen.

Je procède ainsi sur mes sites et ça marche plutôt bien.
www.ipzb-pro.com (le menu et la barre d'accessibilité).

--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur http://zener131.eu/ContactMe

SAM

unread,
Nov 7, 2008, 5:37:46 PM11/7/08
to
Le 11/7/08 5:49 PM, Bernd a écrit :

> Bonjour,
>
> J'ai cette ligne qui permet de modifier la déco d'un lien quand la
> souris le survole.
> li a span.taillemenu:hover{
> font-weight: bold;
> color:#999;
> }
>
> Or, comme vous savez, IE 6 et 7 ignorent cela.

Heu ...
normalement IE (6 au pire) est capable de changer l'apparence d'un lien
au survol

li a { text-decoration: none; color: maroon; }
li a:hover { color: orange; }

> Comment faire pour contourner cette lacune ?

Normalement ces IE doivent aussi pouvoir modifier l'image-lien(*) ou/et
son span inclus

li a span { color: green }
li a:hover span { color: violet }

(*) en fait on modifie l'image de fond d'une image transparente

li a img { background: url(fond.jpg) no-repeat left center; }
li a:hover img { background-position: right center; }

Que donne-ce ?

<a href="#">le lien <span>et son span</span></a>

Résultat en direct :
<http://cjoint.com/?lhxxhWyTVk>

et pour images :
<http://stephane.moriaux.pagesperso-orange.fr/internet/web_css/rollover/bouton_3_etats_css.htm>
Boudiou ! c'est la 1ère fois que je vois ce qu'en fait IE :-(
(c'est un rien moche !)
(et ça met des plombes à décider de charger les images)
Mieux vaut voir le esspécialiste :
<http://www.cssplay.co.uk/menus/index.html>
<http://www.cssplay.co.uk/>

--
sm

SAM

unread,
Nov 7, 2008, 6:01:48 PM11/7/08
to
Le 11/7/08 8:05 PM, Patrick 'Zener' Brunet a écrit :
> Bonjour.

Ha! Oui! j'oublie tout l'temps !

Bonsoir,

> "Bernd" <ro...@bernd.invalid> a écrit dans le message de news:
> 1iq1qna.5gkhkc15jy94sN%ro...@bernd.invalid...
>> J'ai cette ligne qui permet de modifier la déco d'un
>> lien quand la souris le survole.
>> li a span.taillemenu:hover{
>> font-weight: bold;
>> color:#999;
>> }
>>
>> Or, comme vous savez, IE 6 et 7 ignorent cela.
>> Comment faire pour contourner cette lacune ? J'ai en
>> effet besoin de modifier l'allure de ce lien sans utiliser
>> JS.

suffit de hoveriser sur le a et non pas sur son contenu.

> En cherchant dans mon IE, je n'ai pas trouvé comment désactiver JS,

menu Outils / Options Internet / Sécurité
- bouton [Personnaliser le niveau]
- puis scroller jusqu'à 'Script'

> de toute manière je doute que les gens qui utilisent IE par facilité aient
> envie de désactiver JS.

Si toi-même n'est pas fichu de le trouver,
alors Mme Michu ... c'est pas demain la veille !
De toutes façons elle ne sait pas ce que c'est.

Néanmoins ... dans un juste soucis d'accessibilité ... hein ?

> Donc le problème amha est de le faire sans imposer de solution avec JS pour
> les autres navigateurs.
>
> Ca se fait habituellement en rajoutant une propriété propriétaire behavior
> qui attache un module HTC.

ça se fait bêtement en JS pour les seuls IE

window.onload = function() {
var IE = false; /*@cc_on IE=true; @*/
if(IE) {
// tout l'tremblement pour IE
}
}

> Pour ne pas casser la validation de la CSS, on fait ça avec les autres hacks
> dans une CSS additionnelle réservée à IE, en utilisant les commentaires
> spéciaux cités par O.Miakinen.

Mais comme de toutes façons y a moyen de moyenner sans hack ni JS
autant faire normalement les roll-overs sur liens en CSS et pour tout le
monde

> Je procède ainsi sur mes sites et ça marche plutôt bien.
> www.ipzb-pro.com (le menu et la barre d'accessibilité).

;-) (faut juste avoir de bons yeux pour trouver cette barre)

--
sm

Patrick 'Zener' Brunet

unread,
Nov 7, 2008, 7:31:45 PM11/7/08
to
Bonsoir.

"SAM" <stephanemor...@wanadoo.fr.invalid> a écrit dans le message
de news: 4914c8dd$0$850$ba4a...@news.orange.fr...


> Le 11/7/08 8:05 PM, Patrick 'Zener' Brunet a écrit :

> > [...]


> > Donc le problème amha est de le faire sans imposer
> > de solution avec JS pour les autres navigateurs.
> >
> > Ca se fait habituellement en rajoutant une propriété
> > propriétaire behavior qui attache un module HTC.
>
> ça se fait bêtement en JS pour les seuls IE
>
> window.onload = function() {
> var IE = false; /*@cc_on IE=true; @*/
> if(IE) {
> // tout l'tremblement pour IE
> }
> }
>

[...]


> Mais comme de toutes façons y a moyen de moyenner
> sans hack ni JS autant faire normalement les roll-overs
> sur liens en CSS et pour tout le monde
>

C'est vrai qu'ici on est dans le cas où l'objet est un lien (ou inclus dans
un lien).

Dans un lien on peut avoir soit un texte, soit une image.

Tous les exemples de roll-overs que j'ai vus partaient de là.
Et c'est vrai que ça peut se faire en CSS puisque même IE supporte :hover
sur les liens.

Dans mon site, je rends escamotable un div qui contient tout un menu, avec
un titre et de multiples liens. Et là je ne vois pas comment j'aurais pu
faire autrement que faire supporter le :hover à ce container.
OK, donc je présentais la solution lourde.

Bernd

unread,
Nov 8, 2008, 6:37:49 AM11/8/08
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:

> > J'ai cette ligne qui permet de modifier la déco d'un lien quand la
> > souris le survole.
> > li a span.taillemenu:hover{
> > font-weight: bold;
> > color:#999;
> > }
> >
> > Or, comme vous savez, IE 6 et 7 ignorent cela.

Merci de toutes vos réponses mais les solutions proposées me paraissent
lourdes pour seulement modifier un lien survolé dans IE 6 et 7

> Heu ...
> normalement IE (6 au pire) est capable de changer l'apparence d'un lien
> au survol

> li a { text-decoration: none; color: maroon; }
> li a:hover { color: orange; }

Bien sûr - cela tous les navaigateurs le font même les IE mais ce n'est
pas sur le _a_ que porte la modif du lien mais sur autre chose : span
par ex. Et là ça ne marche pas avec IE 5,6 et 7.

> Normalement ces IE doivent aussi pouvoir modifier l'image-lien(*) ou/et
> son span inclus
>
> li a span { color: green }
> li a:hover span { color: violet }

C'est bien cela qui ne fonctionne pas alors que ça fonctionne avec tous
les autres navigateurs que j'ai testés.


Bref, cela me semble assez lourd à mettre en oeuvre ;-((
--
A+

Romer

Bernd

unread,
Nov 8, 2008, 7:08:24 AM11/8/08
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:

> suffit de hoveriser sur le a et non pas sur son contenu.

C'est un peu cela que je ne vois pas bien comment faire justement.
Je vais chercher en effet à le faire quitte à tout refaire le système de
lien mais ça va me prendre du temps et je n'ai pas de IE pour vérifier
chaque fois ! Faut que j'attende le lendemain au poste de travail pour
vérifier !

La solution, serait l'élimination radicale et pure et simple de tous les
IE de la planète - Obama y arrivera t-il ?
--
A+

Romer

Bernd

unread,
Nov 8, 2008, 7:08:24 AM11/8/08
to
Dominique Ottello <air.i...@fra.fr.invalid> wrote:

> D'autre part, les « menus » sont uniquement en CSS, sans JS.
>
> Pour les liens, dans le fichier CSS :
>
> a img {border:none;}

Là je ne pige pas bien - les liens sont des sur des images ?
--
A+

Romer

Bernd

unread,
Nov 8, 2008, 7:08:23 AM11/8/08
to
Olivier Miakinen <om+...@miakinen.net> wrote:

> C'est une *TRÈS* mauvaise idée de changer la taille des caractères au
> survol. Selon le cas cela peut induire un clignotement très désagréable

C'est vrai mais là je suis sûr de mon coup - le cadre qui contient le
lien à l'écran est suffisamment large pour que le passage à la ligne
n'ait pas lieu.

> ou au pire empêcher carrément de cliquer sur certains liens.

Pour le clignotement et l'impossibilité de cliquer, je ne connaissais
pas cet effet de bord.

> qui change la taille, il y a les propriétés font-family, font-variant,
> font-stretch et font-size, mais aussi font-style et font-weight.

C'est vrai mais là encore cela ne marchera avec les IE' brothers que
sur un a:hover et c'est là le hic.

> Je le savais pour IE6, mais pas pour IE7. Tu en es sûr ?

oui.

> Même avec les commentaires conditionnels propres à Internet Explorer, du
> type <!--[if lt IE 7]>...<![endif]--> ?

Ça devient lourd à traîner ce truc là ;-((
de plus il faut le placer dans le html et pas dans le CSS alors que
c'est dans le CSS que ça se passe...
--
A+

Romer

SAM

unread,
Nov 8, 2008, 9:04:47 AM11/8/08
to
Le 11/8/08 12:37 PM, Bernd a écrit :

> SAM <stephanemor...@wanadoo.fr.invalid> wrote:
>
>>> J'ai cette ligne qui permet de modifier la déco d'un lien quand la
>>> souris le survole.
>>> li a span.taillemenu:hover{
>>> font-weight: bold;
>>> color:#999;
>>> }
>>>
>>> Or, comme vous savez, IE 6 et 7 ignorent cela.
>
> Merci de toutes vos réponses mais les solutions proposées me paraissent
> lourdes pour seulement modifier un lien survolé dans IE 6 et 7

Bon ... il semble qu'il faille reprendre avec ton cas spécifique :

li a span.taillemenu { color: #ccc }
li a:hover span.taillemenu { color: #999 }

Voilà !

et ne me dit pas que c'est plus "lourd" que ce tu proposes.

Il n'y a rien à changer dans le html qui continue a rester qque chose
comme :

<a href="p1.htm">
Lien <span class="taillemenu">N° 1</span> <span>page 1</span>
</a>

>> Normalement ces IE doivent aussi pouvoir modifier l'image-lien(*) ou/et
>> son span inclus
>>
>> li a span { color: green }
>> li a:hover span { color: violet }
>
> C'est bien cela qui ne fonctionne pas alors que ça fonctionne avec tous
> les autres navigateurs que j'ai testés.

Je n'ai pas IE7, mais comme IE6 y arrive, je ne vois pas ce qui peut le
bloquer.

> Bref, cela me semble assez lourd à mettre en oeuvre ;-((

Si tu trouves ça "lourd" alors arrête les CSS !


--
sm

Bernd

unread,
Nov 8, 2008, 11:06:43 AM11/8/08
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:

> Bon ... il semble qu'il faille reprendre avec ton cas spécifique :
>
> li a span.taillemenu { color: #ccc }
> li a:hover span.taillemenu { color: #999 }
>
> Voilà !

J'ignorai que a: hover span... pouvait fonctionner, pensant que IE ne
tolerait que a:hover...

Bon, j'essaye après-demain au boulot où se trouve cet ignomineux IE.

> et ne me dit pas que c'est plus "lourd" que ce tu proposes.

Bien entendu - Je parlais de "lourd" en fait pour les solutions avec JS
ou les instructions conditionnelles made in MS dans le html - CSS n'est
jamais lourd.

> Si tu trouves ça "lourd" alors arrête les CSS !

Pas question ;-)
--
A+

Romer

Dominique Ottello

unread,
Nov 9, 2008, 5:55:38 AM11/9/08
to
ro...@bernd.invalid (Bernd) écrivait :

> Merci de toutes vos réponses mais les solutions proposées me paraissent
> lourdes pour seulement modifier un lien survolé dans IE 6 et 7

Au risque de me répéter :

Dans les css

a,a:link,a:visited {color:blue;font-style:normal;text-decoration:none;}
a:hover, a:focus {color:red;text-decoration:underline;font-weight:bold;}

Fonctionne très bien (Sous Windows) avec IE7 et Firefox.

Inconvénient : pas de différenciation des liens déjà visités.

--
Ce n'est pas parce que l'erreur se propage qu'elle devient vérité. Gandhi
Technologie aéronautique : http://aviatechno.free.fr (http://ottello.net)
Concorde dans la presse de 1965 à 2003 : http://le.pointu.free.fr

SAM

unread,
Nov 9, 2008, 9:47:01 AM11/9/08
to
Le 11/9/08 11:55 AM, Dominique Ottello a écrit :

> ro...@bernd.invalid (Bernd) écrivait :
>
>> Merci de toutes vos réponses mais les solutions proposées me paraissent
>> lourdes pour seulement modifier un lien survolé dans IE 6 et 7
>
> Au risque de me répéter :
>
> Dans les css
>
> a,a:link,a:visited {color:blue;font-style:normal;text-decoration:none;}
> a:hover, a:focus {color:red;text-decoration:underline;font-weight:bold;}
>
> Fonctionne très bien (Sous Windows) avec IE7 et Firefox.
>
> Inconvénient : pas de différenciation des liens déjà visités.

Pourtant ça doit aussi fonctionner :

a {font-style:normal;text-decoration:none;}
a:link {color:blue}
a:visited {color: violet; }
a:focus { background: yellow }
a:hover {color:green; background:lightyellow}
a:active { color: red }

attention! l'ordre des déclarations est important.

--
sm

Bernd

unread,
Nov 10, 2008, 2:43:10 PM11/10/08
to
Dominique Ottello <air.i...@fra.fr.invalid> wrote:

> a,a:link,a:visited {color:blue;font-style:normal;text-decoration:none;}
> a:hover, a:focus {color:red;text-decoration:underline;font-weight:bold;}

Merci - je teste mercredi au boulot.

> Fonctionne très bien (Sous Windows) avec IE7 et Firefox.

Mais cela fonctionnera t-il avec IE6 dont 90 postes à mon travail sont
encore affublés et parasités !
--
A+

Romer

SAM

unread,
Nov 10, 2008, 7:16:51 PM11/10/08
to
Le 11/10/08 8:43 PM, Bernd a écrit :


encore une fois IE6 XP y arrive très bien avec les liens !

tiens essaie ça :
<http://cjoint.com/?llbkoHceol>
<http://cjoint.com/data/llbkoHceol_diapos_css.htm>

--
sm

0 new messages