Linked Questions

Popular Questions

Display Text on Hover Items CSS/Javascript

Asked by At

I am trying to display a text ("innerText") in textInfo-box when I hover the button ("cupcake" or "cheesecake" ). Has anybody an idea how to solve it? I guess only CSS won't make it, so some Javascript will be needed?

So to be a bit clearer. When I hover hover "cupcake" the text "Ice cream fruitcake cotton candy." is supposed to appear in the box below the buttons. And when hover "cheesecake" the text "Chocolate sweet roll chupa chups bonbon macaroon." is supposed to appear.

At the end it should work like this:

enter image description here

I am happy for any help! Thx.

.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;
}
<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>

Related Questions