KPC
Kevin Powell - Community•3d ago
سمية

Hover states not working because of stacking layers

I want the bag icon to hide behind the orange section. Just the way it is right now. But when I hover over the ellipsis and the orange section, nothing changes. When I comment out z-index: -2, the hover state works but the bag icon disappears. How should I solve this? https://codepen.io/ksblupzi-the-solid/pen/LENLmRZ
سمية محمود
CodePen
svg hover
...
1 Reply
curiousmissfox
curiousmissfox•3d ago
Im not clear what you want to happen on hover, and hovering where? on the red part? the pink part? the ::before with the background image? the reason hovering isnt working when you have z-index : -2 on .card-wrapper is youre putting it behind the body and html so your pointer cant reach it. You dont need the z-index on it. Take off the z-index and add this property: 
.card-wrapper {
  width: 30%;
  padding-block-start: 50px;
  position: relative;
  /* REMOVE this z-index */
/* z-index: -2; */
  background-color: pink;
/* ADD this property  */
  isolation: isolate;
}
.card-wrapper {
  width: 30%;
  padding-block-start: 50px;
  position: relative;
  /* REMOVE this z-index */
/* z-index: -2; */
  background-color: pink;
/* ADD this property  */
  isolation: isolate;
}

Did you find this page helpful?