绑定到 class 和 id 时悬停不起作用

Question

我有一个 div，我试图让它对悬停做出反应，但我将它绑定到一个 class 和一个 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>

当我删除 css 中的 id 时，它解决了问题，但我没有允许我同时执行这两项操作的解决方案。我试过将 :hover 更改为 div 的 ID，但变化不大。

Answer 1

这是一个简单的 CSS specificity 问题。您的悬停和活动 CSS 规则正在被覆盖，因为它们并不比您之前定义的规则更具体。提高特异性并且它们有效：

#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>

绑定到 class 和 id 时悬停不起作用

Hover doesn't work when binded to class and id

html

css

class

hover