Discussion :

[Delphi-ne]

Bonjour

J'ai une page avec plusieurs liens utilisant le même style :

Code html :

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

<div class="D1" onclick="Decale(3)">

Le style dans la CSS est le suivant:

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
.D1{
	background-color: #262C38;
	width			: 100%;
	height			: 50px;
 	text-align		: center;
	padding-top		: 10%;
	padding-bottom	: 3%;
	border-width	: 1px; 
	border-style	: solid;
	border-color	: #000000;	
	}
.D1:link{
	background-color: #262C38;
	width			: 100%;
	height			: 50px;
 	text-align		: center;
	padding-top		: 10%;
	padding-bottom	: 3%;
	text-decoration : none;
	border-width	: 1px; 
	border-style	: solid;
	border-color	: #000000;	
	}
.D1:visited{
	background-color: #76C7D0;
	width			: 100%;
	height			: 50px;
	color 			: #FFFFFF;
 	text-align		: center;
	padding-top		: 10%;
	padding-bottom	: 3%;
	text-decoration : none;
	border-width	: 1px; 
	border-style	: solid;
	border-color	: #000000;	
	}
.D1:hover{
	background-color: #76C7D0;
	width			: 100%;
	height			: 50px;
	color 			: #FFFFFF;
 	text-align		: center;
	padding-top		: 10%;
	padding-bottom	: 3%;
	text-decoration : none;
	border-width	: 1px; 
	border-style	: solid;
	border-color	: #000000;	
	}
.D1:active{
	background-color: #76C7D0;
	width			: 100%;
	height			: 50px;
	color 			: #FFFFFF;
 	text-align		: center;
	padding-top		: 10%;
	padding-bottom	: 3%;
	text-decoration : none;
	border-width	: 1px; 
	border-style	: solid;
	border-color	: #000000;	
}

Tout fonctionne, les couleurs changent bien au survol de la souris.
Ma question est de savoir comment, à l'ouverture de la page placer une des DIV avec le style de survol.


Merci d'avance de vos idées

[Invité]

Bonjour,
Si j'ai bien compris...

UNE solution :

1- Tu ajoutes une classe "active" sur le <div> concernée:

Code html :

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

<div class="D1 active" onclick="Decale(3)">

2- le CSS :

Code :

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

.D1:hover, .D1.active { ... }

3- (avant que tu poses la question) le JS pour supprimer la classe "active" au survol d'une <div> :

Code JavaScript :

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

1
2
3
4
5
6
7
8
var les_d1 = document.querySelectorAll('.D1');
les_d1.forEach( function( d1 ){
  d1.addEventListener( 'mouseover', function(){
    les_d1.forEach( function( elt){ 
      elt.classList.remove('active');
    });
  })
});

Remarque :

• Il est inutile de recopier TOUTES les propriétés CSS !
• Il faut juste écrire celles qui changent.