悬停项目的CSS / JavaScript的显示文本

问题描述 投票:-1回答:1

我想,当我将鼠标悬停按钮(“蛋糕”或“乳酪”)显示TextInfo中框文本(“innerText属性”)。有没有人一个想法如何解决呢?我想唯一的CSS不会使,所以一些JavaScript将需要?

所以要更清楚一点。当我将鼠标悬停悬停“蛋糕”文本“冰淇淋水果蛋糕棉花糖。”是应该出现在按钮下面的复选框。而当悬停“芝士蛋糕”文本“巧克力甜面包珍宝珠夹心糖蛋白杏仁饼干。”是应该出现。

在到底应该像这样工作:

我很高兴的任何帮助!谢谢。

.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>
javascript html css grid hover
1个回答
0
投票

您可以使用mouseovermouseleave事件侦听器这一点。请注意,我们分别加入data-indexdata-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>
© www.soinside.com 2019 - 2024. All rights reserved.