Box转换不会响应：hover

编程问答 2022-06-04

问题描述

我在学校正在制作一个打地鼠游戏，部分讲座是让我的元素在悬停在上方时转变其位置。但是很明显，每当我在“ .pos类”之后编写：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>

解决方法

即使元素具有多个类，也必须对初始状态和悬停使用相同的类。即你有这个（这两个元素都适用于同一元素）：

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;

import androidx.appcompat.app.AppCompatActivity;



public class MainActivity extends AppCompatActivity {

int seconds_in_millis = 2000 ;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // here the welcome screen will show
    setContentView(R.layout.splash_layout);

    // this code makes the main screen shows after 2 seconds
    new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
            setContentView(R.layout.activity_main);
        }
    },seconds_in_millis) ;
}


}

但是您需要使用相同的选择器进行悬停，例如：

.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; } 设置）

,

该代码实际上是有效的（至少具有您应如何描述的），它只需要进行几处更改，尤其是在元素的类/ 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>

html