hover effect not working on element with lower z-index
Question
I have a problem with the z-index , I have two <div> elements inside a container, one of them works as a background of the container and has a hover effect on its element so when you hover over it, the color of the background changes.
To place it behind the second div I used a negative z-index and this is what I have a problem with, the hover effect doesn't work on it - what am I doing wrong?
* { 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 answers
solution1
0 2021-12-19 06:02:04
From your code, you are hovering over the container div, not the div1.
Z-index see as elevations in a building, and you watching it from birdseye.
To solve this, you should set both div1/div2 with positive z-index, and changing div2's position relative to parent div.
Get more information about div positioning:
https://tomelliott.com/html-css/css-position-child-div-parent
Edit: Here's a quick example simulating your desired hover effect.
<,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>
solution2
0 2021-12-19 07:21:43
See the edits I made to your CSS. It will work better if you set div1 with the background limegreen as z-index: 0; which is the default layer for elements and use z-index: 1; for div2 so it's on the first layer above the default one. See below.
* { 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.