Discussion :

[lesenbei]

je n'arrive pas à modifier le hover sur une image css.(la modification serai juste sur le contour plus grand et la couleur)
J'ai essayé plusieurs manip mais rien n'y fait.

Dans".imagerealisations"

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
32
33
34
35
36
37
38
39
40
41
42
43
44
* Realisations */
 
 
#dossierrealisations {
	float: left;
	width: 880px;
	margin: 48px 0px 0px 0px;
 	padding: 0px 0px 0px 0px;
	}
 
.stylesrealisations {
	float: left;
	width: 260px;
	margin: 0px 50px 30px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	}
 
.stylesrealisations a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFEB39;
	text-decoration: none;
	}
 
.stylesrealisations a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	background: #FFEB39;
	border:10px solid #cccccc;
	}
 
.imagerealisations {
	float: left;
	border-top: 6px solid #FFFFFF;
	border-bottom: 6px solid #FFFFFF;
	border-left: 6px solid #FFFFFF;
	border-right: 6px solid #FFFFFF;
	margin: 0px 0px 16px 0px;
	}

html:

Code :

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

1
2
<div class="stylesrealisations"><a href="#" target="blank"><img src="images/realisations/thumb_asa.jpg" border="0" class="imagerealisations" alt="ASA Organisation"/></a> Carte de visite Recto Verso - Asa Organisation
</div>

[Dan_A]

Avec Internet explorer 6 hover ne peut s'appliquer qu'à des liens, pas à l'image à l'intérieu du lien (à moins d'utiliser un fichier htc).
Internet explorer a peut-être besoin de position:relative dans .stylesrealisations a pour afficher la bordure.

[lvr]

Voici une proposition de css qui va dans le sens de ce que dit Dan_A

Code :

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

1
2
3
4
5
6
7
8
9
10
TABLE.Thumb img, TR.Thumb img, TD.Thumb img {
	margin: 5px;
	border: 0px;
}
 
TABLE.Thumb a:hover img, TR.Thumb a:hover img, TD.Thumb a:hover img{
	margin: 3px;
	border : 2px solid #66FFFF;
 
}

Ce code dit que
- toutes les images qui sont dans une TABLE/TR/TD avec la class "Thumb" ont un bord de 0 et une marge de 5
- ces mêmes images quand elles sont en plus dans "a:hover" ont une marge de 3 et un bord de 2.

En css la règle qui l'emporte est la règle la plus longue:
- la 1ère règle a 2 élements: (1) TABLE/TR/TD (2) IMG
- la 2ème a 3 éléments: (1) TABLE/TR/TD (2) A:HOVER (3) IMG
Celle-ci l'emporte donc sur la précédente quand elle se présente.

L'image n'a donc pas de bord quand l souris ne passe de dessus et a un bord quand elle est survolée par la souris.

[Candygirl]

Tu veux une bordure à l'image c'est ça? Si c'est le cas, tu dois l'appliquer directement à l'image et non pas au lien:

Code :

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

1
2
3
.stylesrealisations a:hover img{
	border:10px solid #cccccc;
}

Cependant pour que cela fonctionne sur IE6, tu dois avoir le a:hover défini, au bsoin avec une propriété "bidon", par exemple:

Code :

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

1
2
3
.stylesrealisations a:hover{
  border:0;
}

[lvr]

Autre solution, mais sans utiliser de lien:

Code :

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

1
2
3
<div onmouseout="this.style.backgroundColor='#F3FAFD'"
    onmouseover="this.style.backgroundColor='#E0F5FC'"
    style="background-color: #F3FAFD;">