Discussion :

[L33loo]

Bonjour,

J'ai un problème de survol entre un texte et une image.

J'ai une image à droite et un texte à gauche.
Quand je survole soit mon image ou alors mon texte, les deux doivent avoir un :hover de couleur dans le css.

L'image à un border et le texte en bold et d'une autre couleur.

Voici le code:

Code :

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

1
2
3
4
5
6
7
8
9
10
<li class="action-accueil"> 
                                                    <div class="visuel"> 
                                                        <a href="#"> 
                                                            <img src="images/centre/img_list_blc1.jpg" alt="forum vie emploi"> 
                                                        </a> 
                                                    </div> 
                                                    <div class="texte"> 
                                                        <a href="#">Forum Vie Emploi</a> 
                                                    </div> 
                                                </li>

Et le code 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
21
22
23
24
25
26
27
28
29
30
31
.action-accueil .visuel, .action-accueil .texte { 
    float:left; 
} 
 
.action-accueil .texte { 
    padding-left:5px; 
    margin-top:9px; 
    color:#39515f; 
} 
 
.action-accueil a { 
    color:#39515f; 
    text-decoration:none; 
} 
 
.action-accueil a:hover { 
    color:#03a4f4; 
    font-weight:bold; 
} 
.action-accueil { 
    display:block; 
    clear:both; 
} 
 
.action-accueil a img { 
    border:#EFFCFE solid 2px; 
} 
 
.action-accueil:hover a img { 
    border:#03a4f4 solid 2px; 
}

Pour le moment, lorsqu'on survole le texte, le border sur l'image apparait bien.
Par contre, lorsqu'on survole l'image, le texte ne change pas de couleur...

Je ne sais pas si c'est très clair...
N'hésitez pas à me poser des questions plus précises.

Merci d'avance.
Leeloo

[pop_up]

Sous quel navigateur fais tu tes tests ?

A noter que sous IE6, la propriété :hover n'est fonctionnelle que sur la balise <a>

Donc la ligne ".action-accueil:hover a img" ne fonctionnera pas

EDIT : je viens de regarder un peu plus, pour faire ce que tu veux, tu ne peux pas dire 'si tu passes sur l'image qui est la, alors change la couleur d'un texte qui est ailleurs. Essaye de faire comme ça plutot :

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
 
.action-accueil a{
    color:#000000;
}
.action-accueil:hover a{
    color:#03a4f4;
}
 
.action-accueil a img {
    border: 0;
}
 
.action-accueil:hover a img {
    border:#03a4f4 solid 2px;
}

[L33loo]

Je suis sous firefox 3.5. Je gèrerai IE plus tard.

Je sais que sous ie6 le :hover ne marchera pas sur ma balise <img>. Graphiquement je gèrerai autrement.

Merci du conseil

[pop_up]

je viens de faire un edit sur mon post pendant que tu répondais.

dsl

[L33loo]

Merci ça marche!

En fait j'avais inversé

.action-accueil a:hover

et

.action-accueil:hover a

Merci beaucoup pour ton aide. Maintenant quand je survole le texte ou l'image, les deux ont leur effets de survole.