hover 覆蓋文本以顯示其他文本

Question

我很難找出如何制作 hover 效果來顯示其他一些文本/按鈕。 我想制作一種帶有懸停功能的導航菜單。

請查看圖片了解更多信息；

當您將 hover 轉到“platenwarmtewisselaar”時，我想在圖片上創建一個下拉菜單。 當您將 go 設置為“buizenwarmtewisselaar”或其他文本/按鈕時，將有幾個其他選項可供選擇。 我怎樣才能將它插入到我的代碼中？

非常感謝！

我的代碼；

 <div id="knoppen"> <div id="Plaat" onclick="URL" onmouseover="ShowP()"> <button id="plaatknop">Platenwarmtewisselaar </button> </div> <div id="buis"> <button id="buisknop" onclick="URL"onmouseover="ShowB()">Buizenwarmtewisselaar</button> </div> <div id="productenplaat"> <div id="gelast"> <button id="gelastknop">Gelasteplatenwisselaar </button> </div> <div id="gesoldeerdplaat"> <button id="gesoldeerdknop">gesoldeerde platenwisselaar</button> </div> <div id="pakkingenplaat"> <button id="pakkingenknop">platenwisselaar met pakkingen</button> </div> </div>

Answer 1

您可以使用如下代碼

 #menu { width: 150px; height: 100%; background: #424242; color: white; float: left; } #menu ul { margin: 0; padding: 0; } #menu li { list-style: none; font-size: 20px; padding: 15px 20px; cursor: pointer; } #menu li:hover { background-color: #90CAF9; } #menu li.active { background-color: #2196F3; } #menu ul li ul { display: none; } #menu ul li.submenu { position: relative } #menu ul li.submenu ul { position: absolute; left: 150px; width: 200px; top: 0; background: #333 } #menu ul li.submenu:hover ul { display: inline-block }

 <div id="menu"> <ul> <li onClick="Dashboard();">Platenwarmtewisselaar </li> <li class="submenu">Buizenwarmtewisselaar &gt; <ul> <li>Add Employee</li> <li>Employee View</li> </ul> </li> <li>Gelasteplatenwisselaar </li> <li class="submenu">Salary <ul> <li>Add Employee</li> <li>Employee View</li> </ul> </li> <li>Change Password</li> </ul> </div>

Answer 2

我不確定，但你是在說這個下拉菜單嗎？ 如果是這樣，您可以按照此處的指南進行操作。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover