在懸停項 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>