Changement de texte au survol

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<main role="main" class="container">
        <div class="row">
            <div class="col-12">
                <ul class="">
                    <li class="A">
                        <p></p>
                    </li>
 
                    <li class="B"><a href="">Text ici</a></li>
                    <li class="C"><a href="">Text ici</a></li>
                </ul>
            </div>
	</div>
   </main>

Comment je peux afficher du texte dans <li class="A"><p></p></li> quand je pointe le curseur dans chaque <li> qui contient la classe B et C?

Merci bien pour votre aide.

:salut:

Voici deux exemples, le premier applique une action différente selon le sujet (A ou B), le second applique la même action dans les deux cas.

Code:

1
2
3
4
5
6
7
8
9
10
11
<ul>
    <li class="info">
        <p>Mort aux cons !</p>
    </li>
    <li class="sujetA">
        <a href="">texte ici</a>
    </li>
    <li class="sujetB">
        <a href="">texte ici</a>
    </li>
</ul>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
 * Action différente
 */
const 
  elemA = document.querySelector( '.sujetA' ),
  elemB = document.querySelector( '.sujetB'),
  elemP = document.querySelector( '.info > p' ),
  strDefault = elemP.textContent; // le texte par défaut
 
elemA.addEventListener( 'mouseenter', ev => {
  elemP.textContent = 'Vaste sujet !';
}, { capture : false, passive : true, once : false } );
 
elemB.addEventListener( 'mouseenter', ev => {
  elemP.textContent = 'La politesse est de rigueur !';
}, { capture : false, passive : true, once : false } );
 
elemA.addEventListener( 'mouseleave', ev => {
  elemP.textContent = strDefault;
}, { capture : false, passive : true, once : false } );
 
elemB.addEventListener( 'mouseleave', ev => {
  elemP.textContent = strDefault;
}, { capture : false, passive : true, once : false } );

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
 * Action identique
 */ 
const 
  elemSujets = Array.from( document.querySelectorAll( '.sujetA, .sujetB' ) ),
  elemP = document.querySelector( '.info > p' ),
  strDefault = elemP.textContent; // le texte par défaut
 
for ( const sujet of elemSujets ){
  sujet.addEventListener( 'mouseenter', ev => {
    elemP.textContent = 'Attention, ils sont nombreux !';
  }, { capture : false, passive : true, once : false } );
 
  sujet.addEventListener( 'mouseleave', ev => {
    elemP.textContent = strDefault;
  }, { capture : false, passive : true, once : false } );
}

Merci bien pour ta reponse.

Bonjour,
cela peut être également réalisé en pure CSS en masquant l'élément « info » au départ et en l'affichant sur le :hover de son parent.