Discussion :

[TheoFoug]

Bonjour,

J'ai deux div l'une à la suite de l'autre que j'aimerais afficher au survol de la souris.
Au départ, l'une est affiché, l'autre masqué.
Si la souris passe sur celle qui est affichée, elle se masque et l'autre apparait.
Quand la souris quitte la seconde, la première réapparait.

Code html :

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

1
2
3
4
5
6
<div class="element element_affiche" id="element_xxx">
	blabla
</div>
<div class="element" id="element_xxx_second">
	blablabla
<div>

Code :

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

1
2
3
4
5
 
$(document).on('mouseover', '.element', function(e){
	$(this).toggle(0);
	$(this).children().toggle(0);
});

J'ai essayé pas mal de solution, mais rien n'y fait.
Il est peut être possible d'afficher l'enfant de la div survolé, masquer la parent, puis l'inverse une fois quitté ?

[LearningBoy]

Bonjour TheoFoug,

Est-ce que cet exemple de code correspond à ce que vous recherchez ?

L'idée est d'englober vos deux éléments dans une div globale afin d'éviter les conflits d'événements JQuery entre mouseover et mouseleave.

Cordialement,

Simon de AwesomeAngular.

[TheoFoug]

Pas vraiment.

Le nombre de couple de div va être conséquent, d'ou la récupération de l'Id au survol.
Je ne peux pas utiliser d'autre framework, uniquement jquery.

[LearningBoy]

Bonjour,

Pourquoi souhaitez-vous récupérer l'ID au survol de l'élément ?

Je pense que ce serait plus simple de sélectionner d'abord tous les éléments, et de les traiter ensuite un par un avec la fonction each de jQuery.

[TheoFoug]

Ca me semble plus rapide en temps d'exécution.

[LearningBoy]

Pour reprendre la question initiale : "Il est peut être possible d'afficher l'enfant de la div survolé, masquer la parent, puis l'inverse une fois quitté ?".

Oui c'est tout à fait possible :
- Sélection d'un élément fils : .children();
- Séléction d'un élément parent : parent();
- Afficher/Masquer/Inverser : show, hide & toggle();

Où en êtes-vous par rapport à votre problème initial ?

Bien cordialement,

Simon.

[TheoFoug]

J'ai laissé tombé les child et les parents, trop compliqué pour moi.
Puis j'ai essayé de faire des sélecteurs dynamique :

Code :

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

1
2
3
4
5
6
7
8
    // Récupération de l'ID (divA_65654)
    //let cssId = $(this).attr("id");
 
    // Extraction (65654)
    //cssId = cssId.substring(5, 10);
 
    // Masque divA_65654
    //$("divA_65654").css("display", "none");

Mais apparament on ne peut pas ... donc j'ai fini par faire avec prev() et next().

Code HTML :

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

1
2
3
4
5
6
7
8
9
<div class="wrapper">
    <div class="divA">I'm divA</div>
    <div class="divB">I'm divB</div>
</div>
 
<div class="wrapper">
    <div class="divA" id="divA_1478">I'm divA</div>
    <div class="divB" id="divB_1478">I'm divB</div>
</div>

Code :

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

1
2
3
4
5
6
7
8
9
$("div.divA").mouseover(function() {
    $(this).next().css("display", "block")
    $(this).css("display", "none");
});
 
$("div.divB").mouseout(function() {
    $(this).previous().css("display", "block")
    $(this).css("display", "none");
});

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
div {
    width: 200px;
    height: 50px;
}
 
.divA {
    background-color: blue;
}
 
.divB {
    display: none;
    background-color: red;
}

Fonctionne !

[LearningBoy]

Félicitations !

[TheoFoug]

Ca n'est pas parfait a cause, apparament, d'un "bug" dans javascript. Js (mouseout) ne détecte pas forcement que le curseur sort si ca va trop vite.
De ce que j'ai pu lire, a cause du fait qu'il soit en événementiel.

Donc parfois, c'est la deuxieme div qui reste affiché.

[Toufik83]

Code :

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

.previous()

ne déclenche pas une erreur dans la console?

[TheoFoug]

Non, pourquoi ?

[Toufik83]

j'ai testé ton code avec 3 versions de jQuery, et l'erreur dans la console persiste :

Code :

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

1
2
3
4
VM111:63 Uncaught TypeError: $(...).previous is not a function
    at HTMLDivElement.<anonymous> (VM111:63)
    at HTMLDivElement.dispatch (jquery.js:5206)
    at HTMLDivElement.elemData.handle (jquery.js:5014)

d'après ce que je sais moi, c'est .prev() au lieu de .previous().

[TheoFoug]

Bah pourtant ...
http://api.jquery.com/prev/

previous() ne fonctionne pas.