框转换不会响应 :hover答案

【问题标题】：Box transition won't respond to :hover框转换不会响应 :hover
【发布时间】：2020-11-02 16:31:41
【问题描述】：

我正在学校制作一个打地鼠游戏，部分课程是让我的元素在我将鼠标悬停在它上面时转换其位置。但显然，每当我在“.pos classes”之后写 :hover 时，除了它完全忽略 CSS 中的那个类之外，什么都没有发生。

body {
  margin: 0;
  padding: 0;
}

main {
  display: grid;
  grid-template-areas: "info game";
  grid-template-columns: 20% 1fr;
}

#screen {
  position: relative;
  grid-area: game;
  height: 45vw;
  width: 80vw;
}

#background {
  grid-area: game;
  position: absolute;
  background-image: url(background.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 44vw;
  width: 80vw;
  z-index: 1;
}

#middleground2 {
  grid-area: game;
  position: absolute;
  background-image: url(middleground2.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 80vw;
  height: 44vw;
  z-index: 3;
}

#sprite3 {
  grid-area: game;
  background-image: url(bully3.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 4vw;
  height: 45vw;
  z-index: 2;
}

.box3 {
  position: absolute;
  left: 50.5vw;
  top: 0vw;
}

.pos3:hover {
  left: 50.5vw;
  top: 4vw;
}

#sprite1 {
  grid-area: game;
  background-image: url(bully1.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 8vw;
  height: 46vw;
  z-index: 3;
}

.box1 {
  position: relative;
  left: 7vw;
  top: 3.5vw;
}

.pos1:hover {
  left: 11vw;
  top: 11vw;
  animation-name: pop-out;
}

.fx1 {}

#middleground {
  grid-area: game;
  position: absolute;
  background-image: url(middleground.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 80vw;
  height: 45vw;
  z-index: 4;
}

#sprite2 {
  grid-area: game;
  background-image: url(bully2.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 13vw;
  height: 45vw;
  z-index: 3;
}

.box2 {
  position: relative;
  left: 67vw;
  bottom: 45vw;
  transform: rotate(325deg);
}

.pos2 {
  right: 77vw;
}

.fix2 {}

#foreground {
  grid-area: game;
  position: absolute;
  background-image: url(foreground.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 80vw;
  height: 45vw;
  z-index: 5;
}

.timer {
  grid-area: game;
  position: absolute;
  background-image: url(timer.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 5vw;
  height: 20vw;
  left: 0;
  bottom: 0.3vw;
  z-index: 5;
  padding: 0;
  margin: 0;
}

.girl {
  grid-area: game;
  position: absolute;
  background-image: url(girlhappy.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 8vw;
  height: 46vw;
  left: 1vw;
  bottom: 19vw;
  z-index: 5;
}

.healthbar {
  grid-area: game;
  position: absolute;
  background-image: url(lifebar.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 16vw;
  height: 46vw;
  left: 10vw;
  bottom: 20vw;
  z-index: 5;
}

aside {
  display: none;
  grid-area: info;
  border: 2px solid red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>basic animation</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <header>

    <nav>
      <ul>


      </ul>
    </nav>

  </header>

  <main>

    <section id=screen>

      <div id="background"></div>


      <div id="middleground2"></div>

      <div id="middleground"></div>



      <div id="foreground"></div>

      <div id="sprite1" class="box1 pos1 fx1"></div>


      <div id="sprite2" class="box2 pos2 fx2"></div>


      <div id="sprite3" class="box3 pos3"></div>



      <div class="timer"></div>
      <div class="girl"></div>
      <div class="healthbar"></div>



    </section>








    <aside>
      <p> this is where i write what the game is about</p>
    </aside>






  </main>






  <footer>



  </footer>
  <script src="addclassin.js"></script>
</body>

【问题讨论】：

标签： html css transition

【解决方案1】：

您必须为初始状态和悬停使用相同的类，即使您的元素有多个类。 IE。你有这个（这适用于同一个元素）：

.box3 {
  position: absolute;
  left: 50.5vw;
  top: 0vw;
}

.pos3:hover {
  left: 50.5vw;
  top: 4vw;
}

但是您需要使用相同的选择器进行悬停，即像这样：

.box3 {
  position: absolute;
  left: 50.5vw;
  top: 0vw;
}

.box3:hover {
  top: 4vw;
}

（并且您可以省略那些在初始状态下相同的设置，例如您的 left 设置）

【讨论】：

感谢您的反馈。尝试更改您提到的选择器，但它仍然不起作用。

【解决方案2】：

代码实际上是有效的（至少有你描述它应该的方式），它只需要一些更改，特别是在元素的类/ID 中，你将三个类赋予一个具有 id 的元素，真的只需要一个。

尝试使用绝对单位 https://www.tutorialrepublic.com/css-tutorial/css-units.php 而不是实际单位，在子元素中使用时可能会产生意想不到的结果。

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

main {
  display: grid;
  grid-template-areas: "info game";
  grid-template-columns: 20% 1fr;
}

#screen {
  position: relative;
  grid-area: game;
  height: 45vw;
  width: 80vw;
}

#background {
  grid-area: game;
  position: absolute;
  background-image: url(background.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 44vw;
  width: 80vw;
  z-index: 1;
}

#middleground2 {
  grid-area: game;
  position: absolute;
  background-image: url(middleground2.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 80vw;
  height: 44vw;
  z-index: 3;
}

#sprite3 {
  grid-area: game;
  background-image: url(bully3.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 4vw;
  height: 45vw;
  z-index: 2;
}

.box3 {
  position: absolute;
  left: 50.5vw;
  top: 0vw;
}

.pos3:hover {
  left: 50.5vw;
  top: 4vw;
}

#sprite1 {
  grid-area: game;
  background-image: url(bully1.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
  z-index: 3000;
  background-color: blue;
}

#sprite1:hover {
  left: 11vw;
  top: 11vw;
  animation-name: pop-out;
}

.box1 {
  position: relative;
  left: 7vw;
  top: 3.5vw;
}

.fx1 {}

#middleground {
  grid-area: game;
  position: absolute;
  background-image: url(middleground.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 80vw;
  height: 45vw;
  z-index: 4;
}

#sprite2 {
  grid-area: game;
  background-image: url(bully2.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 13vw;
  height: 45vw;
  z-index: 3;
  background-color: gold;
}

.box2 {
  position: relative;
  left: 67vw;
  bottom: 45vw;
  transform: rotate(325deg);
}

.pos2 {
  right: 77vw;
}

.fix2 {}

#foreground {
  grid-area: game;
  position: absolute;
  background-image: url(foreground.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 80vw;
  height: 45vw;
  z-index: 5;
  background-color: tomato;
}

.timer {
  grid-area: game;
  position: absolute;
  background-image: url(timer.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-color: green;
  width: 5vw;
  height: 20vw;
  left: 0;
  bottom: 0.3vw;
  z-index: 5;
  padding: 0;
  margin: 0;
}

.girl {
  grid-area: game;
  position: absolute;
  background-image: url(girlhappy.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-color: pink;
  width: 8vw;
  height: 46vw;
  left: 1vw;
  bottom: 19vw;
  z-index: 5;
}

.healthbar {
  grid-area: game;
  position: absolute;
  background-image: url(lifebar.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-color: red;
  width: 16vw;
  height: 46vw;
  left: 10vw;
  bottom: 20vw;
  z-index: 5;
}

aside {
  /*display: none;*/
  grid-area: info;
  border: 2px solid red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>basic animation</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <main>

    <section id=screen>

      <div id="background"></div>
      <div id="middleground2"></div>
      <div id="middleground"></div>
      <div id="foreground"></div>

      <div id="sprite1" class="box1 pos1 fx1"></div>

      <div id="sprite2" class="box2 pos2 fx2"></div>

      <div id="sprite3" class="box3 pos3"></div>

      <div class="timer"></div>
      <div class="girl"></div>
      <div class="healthbar"></div>
    </section>

    <aside>
      <p> this is where i write what the game is about</p>
    </aside>
    
  </main>
  
  <footer></footer>
  <script src="addclassin.js"></script>
</body>

【讨论】：

感谢您的反馈！ :) 但是根据我们的教导，当我们准备像
这样的 JS 时，我们应该使用这种样式。在这种情况下，我用一个 ID 包装了我的元素，并使用提到的转换属性在 CSS 中设置样式。但是每次我尝试使用 :hover 时它都没有反应..