Mouseover sur une div class

**robinowned** · 04/11/2012, 18h10

Bonjour,

j'aimerai afficher le contenu d'une div lors du passage de la souris sur une autre.
J'ai trouvé un code permettant de faire cela sur stackoverflow mais il ne marche que pour les id et non les class.
Le code:

Code :

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

1
2
3
4
<div style="width: 80px; height: 20px; background-color: red;" 
        onmouseover="document.getElementById('div1').style.display = 'block';">
   <div id="div1" style="display: none;">Text</div>
</div>

j'ai essayé avec

Code :

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

getElementsByClass

Mais ça n'a pas l'air de marcher...

**Auteur** · 04/11/2012, 20h02

bonjour,

tu peux être plus précis ? Tu voudrais que ta fonction réalise cette opération pour des éléments qui ont une classe particulière ? Dans ton exemple, les éléments <div> n'utilisent aucune classe.

**NoSmoking** · 04/11/2012, 20h29

Bonjour,
si la DIV est contenue dans la DIV qui reçoit le mouseover, le CSS suffit

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[Hover]</title>
<style>
.une_classe{
  width: 80px;
  height: 20px;
  background-color: red;
}
.une_classe div{
  display: none;
}
.une_classe:hover div{
  display:block;
}
</style>
</head>
<body>
<div class="une_classe" >
   <div>Text</div>
</div>
</body>
</html>

**robinowned** · 04/11/2012, 21h12

bonjour,

tu peux être plus précis ? Tu voudrais que ta fonction réalise cette opération pour des éléments qui ont une classe particulière ? Dans ton exemple, les éléments <div> n'utilisent aucune classe.

Le code donné est celui que j'ai trouvé sur stackoverflow.
Et comme on peut le voir, il utilise des id. J'aimerai avoir un code similaire mais utilisant des classes. Pas de soucis niveau html évidemment mais souci sur le java ou le "document.getElementById('div1')" que j'ai remplacé par "getElementsByClass" ne fonctionne pas.

Bonjour,
si la DIV est contenue dans la DIV qui reçoit le mouseover, le CSS suffit

Oui, sauf que j'aimerai que la div qui englobe l'autre div soit affichée.

Voilà plus de précisions:
J'ai des petits messages postés via un système en php. Ces derniers sont encadrés par une légère bordure.
Ce que j'aimerai obtenir, c'est que la date ainsi qu'un lien viennent apparaitre lorsque la souris est pointée sur le message.

**Bovino** · 05/11/2012, 09h11

Envoyé par robinowned

j'ai essayé avec

Code :

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

getElementsByClass

Mais ça n'a pas l'air de marcher...

Peut-être parce que cette fonction n'existe pas...

Envoyé par robinowned

mais souci sur le java

Mouais... je doute que JavaScript sache compiler et exécuter Java...

Bref, tu peux te tourner vers getElementsByClassName() en faisant attention de bien distinguer un élément HTML et une collection d'éléments HTML.
Tu peux aussi te tourner vers querySelector() ou querySelectorAll().

**robinowned** · 05/11/2012, 14h51

Envoyé par Bovino

Mouais... je doute que JavaScript sache compiler et exécuter Java...

Désolé, j'ai du mal à me mettre dans la tête que java#javascript

Bon ça à l'air de fonctionner avec le querySelector() mais j'ai quand même un problème au niveau du résultat.
En effet, il se comporte comme une <div id>: Il ya 10 messages affichés sur la page, chaque message contient deux div (celle du message et celle de la date), le mouseover/mouseout fonctionne mais... uniquement sur le premier message. Autrement dit, il y a uniquement la date du premier message qui s'affiche lorsque l'on passe la souris sur n'importe quel message !
Une idée ?

**NoSmoking** · 05/11/2012, 19h25

Envoyé par robinowned

Bonjour,
si la DIV est contenue dans la DIV qui reçoit le mouseover, le CSS suffit

Oui, sauf que j'aimerai que la div qui englobe l'autre div soit affichée.

comment veux tu qu'elle recoive un événement si elle est masquée ?

Au vu de tes précisions c'est exactement ce que je t'ai proposé.

Je te remets un exemple, un peu plus construit, qui te montreras le principe, si bien sur tu le testes.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[Hover]</title>
<style>
html, body{
  font-size:1.0em;
  font-family:Verdana;
}
.article{
  position:relative;
  width: 400px;
  background-color: #FFF;
  border:1px solid #CCC;
  margin:10px;
  padding:5px;
}
.article div.auteur{
  display: none;
  position:absolute;
  float:right;
  top:-5px;
  right:-5px;
  background-color: #FFE;
  border:1px solid #369;
  font-size:0.8em;
  padding:0.25em;
}
.article:hover{
  background-color: #F8F8F8;
  border:1px solid #09F;
}
.article:hover div.auteur{
  display:block;
}
</style>
</head>
<body>
<div class="article" >
  <div class="auteur">Auteur : Latrine loser</div>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="article" >
  <div class="auteur">POOête : <a href="http://www.developpez.net/forums/u230465/romainvaleri/">Romain VALERI</a></div>
  <p>Une femme évoquant l'esprit de Chantal Goya dans le corps d'Armande Altaï ne se couche pas vraiment.</p>
  <p>Un homme évoquant l'esprit de Pierre Richard dans le corps de Saint-Nicolas n'attendra presque plus.</p>
  <p>Une créature de rêve avec la voix de John Lennon et les cheveux de Coco l'asticot ne clignote guère.</p>
</div>
</body>
</html>

**robinowned** · 05/11/2012, 21h00

Au temps pour moi, bien joué et merci.

Mouseover sur une div class

JavaScript

Discussions similaires

Partager

Partager