Saya sedang mengerjakan pekerjaan rumah saya dan saya terjebak saat ini dengan menerapkan fitur hover. Jika saya hanya memiliki 1 tombol dan 1 panel semuanya berfungsi dengan baik tetapi ketika saya menambahkan tombol ke-2 semuanya rusak sepenuhnya.

Saya telah mencoba mengganti posisi: absolut, mengedit margin tetapi tidak dapat membantu.

.block {
  width: 600px;
  height: 500px;
  border-style: solid;
  border-width: 4px;
}

.btn-1 {
  width: 296px;
  height: 163px;
  border-style: solid;
  border-width: 2px;
  background-color: #d63;
  z-index: 4;
  position: absolute;
  border-color: black;
}

.btn-2 {
  width: 296px;
  height: 163px;
  border-style: solid;
  border-width: 2px;
  background-color: #d63;
  z-index: 4;
  position: absolute;
  border-color: black;
  margin-top: 164px;
}

.panel {
  width: 300px;
  height: 500px;
  background-color: #d63;
  z-index: 3;
  position: absolute;
  transition: 0.7s;
}

.btn-1:hover+.panel {
  margin-left: 300px;
}
<!DOCTYPE html>
<html lang="">

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

<body>
  <div class="container">
    <div class="block">
      <button class="btn-1"> </button>
      <button class="btn-2"> </button>
      <div class="panel"> </div>
    </div>
  </div>
</body>

</html>

Saya berharap tombol ke-2 tidak akan merusak semuanya dan mengarahkan kursor akan berfungsi dengan benar.

1
eignrvalue 27 Oktober 2019, 13:57

1 menjawab

Jawaban Terbaik

Saat Anda menambahkan tombol kedua di antara keduanya, tombol pertama dan panel tidak lagi saudara kandung yang berdekatan (operator +). Gunakan kombinator saudara umum (~) alih-alih:

.btn-1:hover~.panel {
  margin-left: 300px;
}

Contoh:

.block {
  width: 600px;
  height: 500px;
  border-style: solid;
  border-width: 4px;
}

.btn-1 {
  width: 296px;
  height: 163px;
  border-style: solid;
  border-width: 2px;
  background-color: #d63;
  z-index: 4;
  position: absolute;
  border-color: black;
}

.btn-2 {
  width: 296px;
  height: 163px;
  border-style: solid;
  border-width: 2px;
  background-color: #d63;
  z-index: 4;
  position: absolute;
  border-color: black;
  margin-top: 164px;
}

.panel {
  width: 300px;
  height: 500px;
  background-color: #d63;
  z-index: 3;
  position: absolute;
  transition: 0.7s;
}

.btn-1:hover~.panel {
  margin-left: 300px;
}
<!DOCTYPE html>
<html lang="">

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

<body>
  <div class="container">
    <div class="block">
      <button class="btn-1"> </button>
      <button class="btn-2"> </button>
      <div class="panel"> </div>
    </div>
  </div>
</body>

</html>
1
Ori Drori 27 Oktober 2019, 11:01