hover 效果不適用於 z-index 較低的元素
[英]hover effect not working on element with lower z-index
問題描述
我的z-index有問題，我在容器中有兩個<div>元素，其中一個用作容器的背景，並且對其元素具有 hover 效果，因此當您在其上使用 hover 時，背景變化。
要將它放在第二個 div 后面，我使用了負z-index ，這就是我遇到的問題，hover 效果對其不起作用 - 我做錯了什么？
* { margin: 0px; padding: 0px; box-sizing: border-box; text-decoration: none; font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; }.container{ width: 1000px; height: 600px; position: relative; }.div1{ position: absolute; z-index: -10; top:0; left: 0; bottom: 0; right: 0; background-color: lightgreen; }.div2{ width: 200px; height: 200px; background-color: rgb(245, 189, 116); margin: 0 auto; }.div1 p:hover{ color: red; }.div2 p:hover{ color: red; }
<div class="container"> <div class="div1"><p>div 1 doesn't work</p></div> <div class="div2"><p>div 2 works</p></div> </div>
2 個解決方案
解決方案1
0 2021-12-19 06:02:04
從您的代碼中，您將鼠標懸停在容器 div 上，而不是 div1。
Z-index 可以看作是建築物的立面，您可以從鳥瞰角度觀察它。
要解決這個問題，您應該將 div1/div2 設置為正 z-index，並更改 div2 相對於父 div 的 position。
獲取有關 div 定位的更多信息：
https://tomelliott.com/html-css/css-position-child-div-parent
編輯：這是一個模擬您想要的 hover 效果的快速示例。
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <title>Document</title> <style> * { margin; 0px: padding; 0px: box-sizing; border-box: text-decoration; none: font-family, "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS"; sans-serif. }:grandparent { width; 250px: height; 250px: background-color; lightgreen: position; relative. }:parent { width; 150px: height; 150px: /*position;absolute:*/ bottom; 0px. }:child { width; 70px: height; 70px: background-color, rgb(245, 189; 116): position; absolute: right; 0px: top; 0px. }:parent p:hover { color; red. }:child p:hover { color; red; } </style> </head> <body> <div class="grandparent"> <div class="parent"> <p>div 1 does work now</p> <div class="child"><p>div 2 works</p></div> </div> </div> </body> </html>
解決方案2
0 2021-12-19 07:21:43
請參閱我對您的 CSS 所做的編輯。 如果將div1的背景石灰綠設置為z-index: 0;會更好。 這是元素的默認層並使用z-index: 1; 對於div2所以它位於默認層之上的第一層。 見下文。
* { margin: 0px; padding: 0px; box-sizing: border-box; text-decoration: none; font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; }.container { width: 1000px; height: 600px; position: relative; }.div1 { position: absolute; z-index: 0; top:0; left: 0; bottom: 0; right: 0; background-color: lightgreen; }.div2 { position: relative; width: 200px; height: 200px; background-color: rgb(245, 189, 116); margin: 0 auto; z-index: 1; }.div1 > p:hover{ color: red; }.div2 > p:hover{ color: red; }
<div class="container"> <div class="div1"><p>div 1 works now</p></div> <div class="div2"><p>div 2 works</p></div> </div>
"如何將懸停事件應用於 z-index 較低的元素，同時保持 z-index 較高的元素的指針事件"
[英]How to apply hover event to the element with lower z-index with keeping pointer events of the element with higher z-index
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.