Element not doing anything when hovered

March 11, 2023

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    display: grid;
    place-items: center;
    height: 100vh;
    width: 100vw;
}

.container{
    display: grid;
    place-items: center;
    background-color: rgb(43, 42, 42);
    border-radius: 15px;
    padding: 15px;
    width: 245px;
    height: 300px; 
    transition: all 1.2s ease;
    z-index: -1;
}

.box{
    display: grid;
    place-items: center;
    background-color: rgb(53, 53, 53);
    border-radius: 15px;
    padding: 15px;
    width: 232px;
    height: 287px;
    transform: translate(-8px, -8px);
    color: grey;
    transition: all 1s ease;
    z-index: 1;
}

.box:hover{
    color: white;
    border-radius: 15%;
}

body:has(.box:hover) .container{
    border-radius: 15%;
}

<div class="container">
        <div class="box">
            <div>
                <h1>Lorem, ipsum.</h1>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate, inventore dicta quasi nesciunt sequi cumque cum quo ratione officiis, corporis tempore qui, quia fugiat reiciendis quisquam odit deserunt id sapiente?</p>
            </div>
        </div>
        <div class="sides">
            <div class="side top"></div>
            <div class="side right "></div>
            <div class="side bottom"></div>
            <div class="side left"></div>
        </div>
    </div>

when i hover over the box class absolutely nothing happens at all and i have searched things up but have found nothing useful and i have done other mini projects and i have used the :hover psuedo-class in and its worked fine but this time its not worked also in the debugger in microsoft edge when i enable hover it does what i want it to do but when i hover it with my mouse it does nothing

i tried rearranging the code a bit and nothing worked

>Solution :

Someone else can probably explain it better than I can, but removing your z-index: -1; seems to fix it.

Check out this answer on negative z-index.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  width: 100vw;
}

.container {
  display: grid;
  place-items: center;
  background-color: rgb(43, 42, 42);
  border-radius: 15px;
  padding: 15px;
  width: 245px;
  height: 300px;
  transition: all 1.2s ease;
  /*z-index: -1;*/
}

.box {
  display: grid;
  place-items: center;
  background-color: rgb(53, 53, 53);
  border-radius: 15px;
  padding: 15px;
  width: 232px;
  height: 287px;
  transform: translate(-8px, -8px);
  color: grey;
  transition: all 1s ease;
  z-index: 1;
}

.box:hover {
  color: white;
  border-radius: 15%;
}

body:has(.box:hover) .container {
  border-radius: 15%;
}

<div class="container">
  <div class="box">
    <div>
      <h1>Lorem, ipsum.</h1>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate, inventore dicta quasi nesciunt sequi cumque cum quo ratione officiis, corporis tempore qui, quia fugiat reiciendis quisquam odit deserunt id sapiente?</p>
    </div>
  </div>
  <div class="sides">
    <div class="side top"></div>
    <div class="side right "></div>
    <div class="side bottom"></div>
    <div class="side left"></div>
  </div>
</div>