我想,当我将鼠标悬停按钮(“蛋糕”或“乳酪”)显示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>
您可以使用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>