Hover doesn't work when binded to class and id

Question

I have a div that I am trying to make react to hover, but I have it binded to a class and an id.

#levelbox1 {
  left: 150px;
  position: absolute;
  background-color: rgb(0, 228, 0);
  border-radius: 15px;
  box-shadow: 1px 1px 4px, inset 0 0 10px rgb(255, 255, 255);
  width: 250px; 
  height: 390px;
  z-index: -5;
}

.levelbox {
  position: relative;
  z-index: 20;
}

.levelbox:hover, .levelbox:active {
  box-shadow: inset 0 0 5px rgb(255, 255, 255);
  width: 105%;
  height: 105%;
}

<div id="thirdbody">
            <div class="levelbox" id="levelbox1">
                <center>
                <h1 class="levelboxheader">
                    Beginner 
                </h1>
                <p class="levelboxtext">
                    Features: <br>
                    - Aiming <br> 
                    - Cps <br> 
                    - W-tapping <br> 
                    - Blockhitting <br> 
                    - Basic explanations 
                </p>
                </center>
            </div>

When I delete the id in the css, it fixes the problem, but I don't have a solution that allows me to do both. I've tried changing the :hover to the id of the div, but it doesn't change much.

score 0 · Accepted Answer · answered Jan 28 '21 at 19:06

This is a simple CSS specificity issue. Your hover and active CSS rules are being overridden because they're not more specific than the rules you defined earlier. Increase the specificity and they work:

#levelbox1 {
  left: 150px;
  position: absolute;
  background-color: rgb(0, 228, 0);
  border-radius: 15px;
  box-shadow: 1px 1px 4px, inset 0 0 10px rgb(255, 255, 255);
  width: 250px;
  height: 390px;
  z-index: -5;
}

.levelbox {
  position: relative;
  z-index: 20;
}

#thirdbody .levelbox:hover,
#thirdbody .levelbox:active {
  box-shadow: inset 0 0 5px rgb(255, 255, 255);
  width: 105%;
  height: 105%;
}

<div id="thirdbody">
  <div class="levelbox" id="levelbox1">
    <center>
      <h1 class="levelboxheader">
        Beginner
      </h1>
      <p class="levelboxtext">
        Features: <br> - Aiming <br> - Cps <br> - W-tapping <br> - Blockhitting <br> - Basic explanations
      </p>
    </center>
  </div>

Hover doesn't work when binded to class and id

1 Answers1