Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

IE et hover

17 réponses
Avatar
romer
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

10 réponses

1 2
Avatar
CrazyCat
Bernd wrote:
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.



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
Avatar
Olivier Miakinen
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]--> ?
Avatar
Dominique Ottello
(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
Avatar
Patrick 'Zener' Brunet
Bonjour.

"Bernd" a écrit dans le message de news:
1iq1qna.5gkhkc15jy94sN%

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.




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
Avatar
SAM
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
Avatar
SAM
Le 11/7/08 8:05 PM, Patrick 'Zener' Brunet a écrit :
Bonjour.



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

Bonsoir,

"Bernd" a écrit dans le message de news:
1iq1qna.5gkhkc15jy94sN%
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
Avatar
Patrick 'Zener' Brunet
Bonsoir.

"SAM" a écrit dans le message
de news: 4914c8dd$0$850$
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.

--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur http://zener131.eu/ContactMe
Avatar
romer
SAM 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
Avatar
romer
Olivier Miakinen <om+ 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
Avatar
romer
Dominique Ottello 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
1 2