2
votes

Afficher le texte sur l'élément survolé avec Javascript

J'essaye d'afficher un texte ("innerText") dans la zone textInfo lorsque je passe le bouton ("category"). Quelqu'un at-il une idée de comment le résoudre? Je suppose que seul le CSS ne suffira pas, donc du Javascript sera nécessaire.

Mise à jour: J'ai maintenant inclus un élément de plus. Mais les deux textes s'affichent maintenant lorsque je survole les éléments. Alors, comment puis-je rendre possible d'afficher uniquement le texte qui appartient à chaque élément séparé? ;)

<div class="wrapper">
   <div class="box pastries" id="pastries">
     <div class="box item cupcake">Cupcake</div>
     <div class="box item cheesecake">Cheesecake</div>
   </div>
   <div class="box textInfo" id="textInfo">
     <h2>Please, select a category first!</h2>
     <div class="innerText-cupCake">
        <p>Ice cream fruitcake cotton candy.</p>
     </div>
     <div class="innerText-cheeseCake">
        <p>Chocolate sweet roll chupa chups bonbon macaroon.</p>
     </div>
   </div>
 </div>

.textInfo {
  border: solid 1px lightblue;
}

.textInfo:hover {
  background-color: #e8a4c9;
  color: #fff;
}

#pastries:hover + #textInfo .innerText-cupCake {
  display: block;
}

#pastries:hover + #textInfo .innerText-cheeseCake {
  display: block;
}

.innerText-cupCake {
  display: none;
}

.innerText-cheeseCake {
  display: none;
}

.item {
  background-color: lightblue;
  width: 200px;
  padding: 5px;
  text-align: center;
}

.item:hover {
  background-color: #e8a4c9;
}

h2 {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  padding: 10px;
}

javascript html css

0 commentaires

4 Réponses :

2
votes

https://jsfiddle.net/4ucnxsaw/

Vous devez modifier votre code HTML a bit.

.item:hover .innerText {
  display: block;
}

Il sera désormais facile de réaliser des choses grâce à CSS. Ajoutez simplement une règle de style

 <div class="wrapper">
   <div class="box pastries">
     <div class="box item cupcake">Category
       <div class="innerText">
        <p>Ice cream fruitcake cotton candy.</p>
       </div>
     </div>

   </div>
   <div class="box textInfo"><h2>Please, select a category first!</h2>       
   </div>
 </div>

4 commentaires

Ah oui, mais le texte devrait apparaître dans la zone textInfo. Désolé j'ai manqué ça.

ajoutez simplement position: absolute; à la règle de style pour item: hover .innerText

Malheureusement, le texte ne s'affiche pas dans la zone textInfo.

jsFiddle ( jsfiddle.net/30hrc7yu ) si ce n'est pas ce dont vous avez besoin, aidez-moi à comprendre votre besoin.

0
votes

Si le texte est fixe (par exemple, ne changera pas), utilisez l'attribut title dans votre HTML:

document.querySelector(".box.item.cupcake").addEventListener("mouseover", (e) => {
    e.target.setAttribute("title", document.querySelector("div.innerText p").innerText);
});

Si le texte change, vous pouvez utiliser quelques JavaScript simples comme ceci:

<div class="box item cupcake" title="Ice cream fruitcake cotton candy">Category</div>

0 commentaires

0
votes

Vous pouvez utiliser cette astuce css si vous avez des éléments adjacents

<div class="wrapper">
   <div class="box pastries" id="pastries">
     <div class="box item cupcake">Category</div>
   </div>
   <div class="box textInfo" id="textInfo">
     <h2>Please, select a category first!</h2>
     <div class="innerText">
        <p>Ice cream fruitcake cotton candy.</p>
     </div>
   </div>
 </div>

Dans votre cas, vous pouvez le faire:

.textInfo {
  border: solid 1px lightblue;
}

.textInfo:hover {
  background-color: #e8a4c9;
  color: #fff;
}

#pastries:hover + #textInfo .innerText {
  display: block;
}

.innerText {
  display: none;
}

.item {
  background-color: lightblue;
  width: 200px;
  padding: 5px;
  text-align: center;
}

.item:hover {
  background-color: #e8a4c9;
}

h2 {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  padding: 10px;
}

#elem1:hover + #elem2 {
  /* to do */
}

2 commentaires

@ user11001232 Fixe

J'ai mis un autre élément maintenant appelé «cheesecake». Comment puis-je rendre possible le survol de chacun, tout en affichant son texte d'appartenance. Pour le moment, il affiche les deux textes, quel que soit l'élément sur lequel je vais survoler. Je sais que ça se complique;).

1
votes

C'est une autre approche, avec deux écouteurs d'événements. Un pour survoler l'élément et l'autre lorsque la souris quitte l'élément.

<div class="wrapper">
    <div class="box pastries">
        <div class="box item cupcake">Category</div>
    </div>
    <div class="box textInfo">
        <h2>Please, select a category first!</h2>
        <div class="innerText hide"><!-- added `hide` class -->
            <p>Ice cream fruitcake cotton candy.</p>
        </div>
    </div>
</div>

/* hide text by default */
h2 { display: none; } /* not displaying h2 only on example, please remove this rule */
.hide { display: none; }

// if hover -> display txt
function displayTxt(evt) {
    evt.currentTarget.parentNode.querySelector( '.innerText' ).classList.remove( 'hide' );
}
// if leave -> hide txt
function removeTxt(evt) {
    evt.currentTarget.querySelector( '.innerText' ).classList.add( 'hide' );
}

/* mouseover and mouseout events to `.wrapper` element */
var $wrapper = document.querySelector( '.wrapper' );
$wrapper.addEventListener( 'mouseover', displayTxt );
$wrapper.addEventListener( 'mouseout', removeTxt );

3 commentaires

Le texte est censé apparaître, lorsque je survole la catégorie et non Veuillez sélectionner une catégorie.

Terminé, corrigé ... Merci ... Faites-moi savoir si vous avez d'autres problèmes :)

en lisant les commentaires ci-dessus, je viens de réaliser que vous ne voulez pas que le

Afficher le texte sur l'élément survolé avec Javascript

apparaisse ... seulement innerText ... je le modifierai

apparaisse ... seulement `innerText` ... je le modifierai