Discussion :

[sacha69]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[sacha69]

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 :

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.

[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é

[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 (??)

[sacha69]

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 ..

[sacha69]

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 ^^