如何在另一個 div 的頂部添加文本 div，同時保持 hover 超過它下面的 div 的能力？
[英]How to add text div on top of another div while keeping the ability to hover over the div below it?
問題描述
以下代碼是我面臨的問題的簡化版本，知道文本必須是一個單獨的 div，它將使用定位放置在頂部，簡而言之，文本需要對用戶可見，但不應影響網站上的任何內容.
body { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; } #box { width: 600px; height: 200px; background-color: yellow; } #box:hover { background-color: blue; } #text { position: relative; bottom: 50px; }
<body> <div id="box"></div> <div id="text">i still want the color of the box to change even when im hovering over this text</div> </body>
2 個解決方案
解決方案1
2 已采納 2021-02-13 05:14:34
將pointer-events: none添加到文本 div。
body { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; } #box { width: 600px; height: 200px; background-color: yellow; } #box:hover { background-color: blue; } #text { position: relative; bottom: 50px; pointer-events: none; }
<body> <div id="box"></div> <div id="text">i still want the color of the box to change even when im hovering over this text</div> </body>
解決方案2
-1 2021-02-13 06:32:19
單獨使用 CSS 是不可能的，無法從子元素 select 中的父元素 css 更新樣式。
所以，你可以寫一個 JS 來做到這一點。 這是更新的代碼。
body { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; } #box { width: 600px; height: 200px; background-color: yellow; } #box:hover { background-color: blue; }.blue{ background-color: blue;important: } #text { position; relative: bottom; 50px; }
<body> <div id="box"></div> <div id="text" onmouseout="update(false)" onmouseover="update(true)">i still want the color of the box to change even when im hovering over this text</div> <script> function update(updateColor){ let box = document.getElementById('box'); if(updateColor){ box.classList.add("blue"); }else{ box.classList.remove("blue"); } } </script> </body>
如果當前 div 上方有另一個 div，如何在 div 頂部添加填充？
[英]How to add padding on top of a div if there is another div above the current div?
如何在保持文本垂直居中的同時使div的大小與另一個div相同？
[英]How can I make a div grow the same size as another div, while keeping it's text vertically centered?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.