在悬停项 CSS/Javascript 上显示文本

Question

当我悬停按钮（“cupcake”或“cheesecake”）时，我试图在 textInfo-box 中显示文本（“innerText”）。有人知道如何解决吗？我猜只有 CSS 不会成功，所以需要一些 Javascript？

所以要清楚一点。当我将鼠标悬停在“纸杯蛋糕”上时，文字“冰淇淋水果蛋糕棉花糖”。应该出现在按钮下方的框中。当悬停“芝士蛋糕”时，文字“巧克力甜卷 chupa chups bonbon macaroon”。应该会出现。

最后它应该像这样工作：

我很高兴得到任何帮助！谢谢。

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

Answer 1

您可以为此使用mouseover 和mouseleave 事件监听器。 请注意，我们分别为要根据悬停特定元素显示的元素添加了data-index 和data-target

var pastries = document.getElementById('pastries');

// this handler will be executed every time the cursor is moved over a different list item
  pastries.addEventListener("mouseover", function( event ) {   
   var dataTarget = event.target.getAttribute('data-target')
		textInfo.querySelector('[data-index="'+ dataTarget +'"]').style.display='block';
  
  }, false);
//for mouseleave, we need to iterate each `#pastries` child element
  var pastriesChildren = document.querySelectorAll('#pastries>.box.item');
  pastriesChildren.forEach(function(pastry){
  		  pastry.addEventListener("mouseleave", function( event ) {    
        var dataTarget = event.target.getAttribute('data-target')
        textInfo.querySelector('[data-index="'+ dataTarget +'"]').style.display='none';

      }, false);
  })
   

.textInfo {
  border: solid 1px lightblue;
}

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



.innerText-cupCake {
  display: none;
}

.innerText-cheeseCake {
  display: none;
}

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

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

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