Discussion :

[Delphi-ne]

Bonjour,

J'ai 4 DIV et il faut que le fond de la div change lorsque la souris passe dessus.

Code HTML :

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
	<div id="DIV1" class="D1_Init" onclick="Decale(0)" onmouseover="RegulDIV()">
		<?PHP echo DATE_NomJour($LN_Decalage + 0); ?>
		<p class="PJour"><?PHP echo DATE_Quantieme($LN_Decalage + 0); ?></p>
	</div>
	<div class="D1" onclick="Decale(1)" onmouseover="RegulDIV()">
		<?PHP echo DATE_NomJour($LN_Decalage + 1); ?>
		<p class="PJour"><?PHP echo DATE_Quantieme($LN_Decalage + 1); ?></p>
	</div>
	<div class="D1" onclick="Decale(2)" onmouseover="RegulDIV()">
		<?PHP echo DATE_NomJour($LN_Decalage + 2); ?>
		<p class="PJour"><?PHP echo DATE_Quantieme($LN_Decalage + 2); ?></p>
	</div>
	<div class="D1" onclick="Decale(3)" onmouseover="RegulDIV()">
		<?PHP echo DATE_NomJour($LN_Decalage + 3); ?>
		<p class="PJour"><?PHP echo DATE_Quantieme($LN_Decalage + 3); ?></p>
	</div>

La CSS est la suivante :

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
 
.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;
	text-decoration : none;
	}
.D1:visited{
	background-color: #76C7D0;
	color 			: #FFFFFF;
	text-decoration : none;
	border-color	: #000000;	
	}
.D1:hover{
	background-color: #76C7D0;
	padding-top		: 10%;
	text-decoration : none;
	border-color	: #000000;	
	}
.D1:active{
	background-color: #76C7D0;
	color 			: #FFFFFF;
	text-decoration : none;
	border-width	: 1px; 
	border-style	: solid;
	border-color	: #000000;	
}

Cela fonctionne bien : la div change de couleur quand la souris passe dessus.
Par contre si la souris ne se trouve sur aucune DIV toutes sont de la même couleur. Une des div, idéalement la dernière survolée, devrait être dans le style D1.active

Je ne suis pas expert en CSS, merci de vos conseils.

[psychadelic]

c'est bien de montrer un extrait de code, mais c'est mieux de la présenter sans PHP, cad en le récupérant sur le navigateur (afficher la source).
ainsi que de monter dans quoi sont imbriqués tes 4 div

C'est le principe même du css hover son action se limite au survol de la souris.

pour le genre d'effet que tu désire, il faut en passer par du JavaScript, mais pas les 2 en même temps.

[Invité]

Bonjour,

Pourquoi ouvrir une discussion, alors que j'ai DEJA répondu dans celle-ci ??


Il suffit d'adapter le script JS que j'ai donné :

Code :

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

1
2
3
4
5
6
7
8
9
var les_d1 = document.querySelectorAll('.D1');
les_d1.forEach( function( d1 ){
  d1.addEventListener( 'mouseover', function(){
    les_d1.forEach( function( elt){ 
      elt.classList.remove('active'); // on supprime la classe sur tous les div
    });
      d1.classList.add('active'); // on ajoute la classe sur la div survolée 
  })
});

[Delphi-ne]

Pourquoi ouvrir une discussion, alors que j'ai DEJA répondu dans celle-ci

Le cas est différent ici.
Dans le post de l'autre jour je voulais que la surbrillance soit positionnée dès l'ouverture de la page.
Là j'ai compris que le javascript était indispensable

Dans le cas présent j'espérais que l'on pourrait exploiter les attributs VISITED ou ACTIVE.

A défaut, effectivement je vas utilise du Javascript.


Merci à tous les 2

[Invité]

Les propriétés :active, :link, :visited s'appliquent (généralement) aux liens (<a>) et/ou boutons (<button>).
Pas aux <div>.

[psychadelic]

à la limite tu peux utiliser le focus pour conserver une "permanence".

en fait cela fonctionne sous Chromium
et sous Firefox, j'ai eu des tests étranges ou il fallait faire un premier clic sur la fenêtre pour que cela fonctionne... !?
- non testé ailleurs et sans garanties de toutes façons. -

.

Code HTML :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title> Focus for Hover </title>
<style>
  div {
    display : block;
    float   : left;
    width   : 70px;
    height  : 50px;
    padding : 20px 0 0 20px;
    border  : 1px solid white;
    background-color:steelblue;
  }
  div:focus {
    background-color:tomato;
  }
</style>
</head>
<body >
    <div tabindex="0"> aa </div>
    <div tabindex="0"> bb </div>
    <div tabindex="0"> cc </div>
    <div tabindex="0"> dd </div>
  <script>
    document.onmouseover = function(e) {
      if (!e.target.matches('div')) return;
      e.target.focus();
    }
  </script>
</body>
</html>

PS, l'ajout du tabindex est indispensable pour que l'élément puisse avoir un focus.