bug a:hover IE7

Version imprimable

bug a:hover IE7

Bonjour à tous!

Un petit soucis me gâche l'existence depuis un petit moment maintenant :p

Mon soucis est le suivant : J'ai un <a> qui entoure une image.

Au rollover de l'image, le a doit avoir un fond blanc.

Ca marche dans firefox et ie8 mais dans ie7, je dois d'abord cliquer sur mon image avant de pouvoir voir le rollover oO

Edit : Mon image fait du 60x60 donc le problème ne vient pas du fait qu'elle puisse cacher le fond blanc.

Voici le html :

Code:

1
2
3
4
5
6
 
 <div class="exposant fl">                                            
    <a href="#">                                            
          <img src="img/global/rech/global/example/logo_hardy.gif" alt="Hardy Inside" />                                            
        </a>
    </div>

Puis le CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    .list ul li .exposant a{
        width:90px;
        height:70px;
        display:block;    
        padding-top:5px;
        padding-left:14px;
    }
 
    .list ul li .left .exposant a:hover{
        background-color:#fff;
        width:90px;
        height:70px;
        display:block;
        padding-top:5px;
        padding-left:14px;
    }
 
    .list ul li a.exposant img{
 
    }

Une idée?

Merci d'avance à tous :)

24/04/2010, 10h14
badajoz
Salut,

Je ne pense pas que tu utilises la bonne méthode.

Tu devrait inclure ton image dans le css de ton image et l'enlever pour le hover, comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 a { display: block; width: ...; height: ...; background: url('...'); } a:hover { display: block; width: ...; height: ...; background: #fff; }
L'inconvénient de cette solution est si tu a une image différente par lien.
26/04/2010, 13h38

Hello !

Merci pour ta réponse :)

En effet, ce sera des images gérées dynamiquement. Je ne comprends toujours pas d'où peut venir le problème ..

De plus :

Citation:

Salut,

Je ne pense pas que tu utilises la bonne méthode.

Tu devrait inclure ton image dans le css de ton image et l'enlever pour le hover, comme ceci :

Il ne s'agit pas d'enlever l'image, mais de lui appliquer un fond blanc.
26/04/2010, 18h06
badajoz

Oui je comprend bien l'histoire de fond blanc, mais comme tu dis c'est le fond, ton image est toujours présente.

Il faudrait que tu la supprime et la remette un fois le rollover passé
26/04/2010, 19h14
Yorick

Salut,

Le fond n'est visible qu'autour de l'image ou ton image a des transparences ?
Dans le premier cas tu peux rajouter des border-XX-widht à la place des pading et passer border-color à #fff lors du survol.h

Bon c'est qu'une rustine, ça n'explique pas le pourquoi de ton pb (??)
26/04/2010, 20h18

Je vais tenter le border, je pense qu'il ne devrait pas y avoir de soucis :)

Merci à vous deux pour les réponses, je repasserai pour dire ce qu'il en est :)

En tout cas, le mystère reste entier pour ce qui est de ce bug d'IE7 .. :koi:
28/04/2010, 10h33

Le border fonctionne à merveille, j'ai juste eu besoin de faire une petite pirouette pour éviter que mon image se décale en ajoutant ce border.

Merci encore! et si quelqu'un passe par là et à une réponse pour ce bug, je prends ^^