悬停效果不适用于 z-index 较低的元素
Posted
技术标签:
【中文标题】悬停效果不适用于 z-index 较低的元素【英文标题】：hover effect not working on element with lower z-index 【发布时间】：2022-01-21 07:48:38 【问题描述】：我的 z-index 有问题。我在这个 jsfiddle 中模拟了我的问题。我在一个容器中有两个兄弟姐妹 div。其中一个用作容器的背景并对其元素具有悬停效果，因此当您将鼠标悬停在其元素上时，元素的颜色会发生变化。将它放在第二个 div 后面，我使用了负 z-index ，但悬停效果对其不起作用。这个问题的任何解决方案？我看到了一些关于这个主题的问题，但没有任何有效的答案......
提前致谢。
<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;
.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;
</style>
</head>
<body>
<div class="container">
<div class="div1"><p>div 1 doesn't work</p></div>
<div class="div2"><p>div 2 works</p></div>
</div>
</body>
</html>
【问题讨论】：
我想你可以在这里找到答案。 ***.com/questions/35310779/… 您要更改背景颜色还是文本颜色？ 【参考方案1】：查看我对您的 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>【讨论】：
【参考方案2】：从您的代码中，您将鼠标悬停在容器 div 上，而不是 div1。
Z-index 可以看作是建筑物的立面，您可以从鸟瞰的角度观察它。
要解决这个问题，您应该将 div1/div2 设置为正 z-index，并更改 div2 相对于父 div 的位置。
获取有关 div 定位的更多信息：
https://tomelliott.com/html-css/css-position-child-div-parent
编辑：这是一个模拟您想要的悬停效果的快速示例。
<!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>【讨论】：
感谢您的评论亲爱的。但问题是我的网站是响应式的，我无法在dive2 上设置position: absolute，如果我这样做，整个布局将崩溃，它会脱离流程，使其响应式成为一场噩梦。我只是尝试将本教程（youtube.com/watch?v=fDSd2fudits&t=105s）作为背景并在其前面放置另一个 div以上是关于悬停效果不适用于 z-index 较低的元素的主要内容，如果未能解决你的问题，请参考以下文章
Reactjs Material UI如何为Dialog组件设置较低的z-index