html - CSS 元素不隐藏第二个 block

Question

为什么“zawartosc prawo”不隐藏“zawartosc lewo”？悬停效果？我尝试更改类名、添加 ID 等，但仍然不起作用 :(

也许我必须尝试添加一些 JS？但我认为有人知道如何做到这一点。

代码

.zamieniamlewo {
  display: none;
}

.prawo:hover ~ .zamieniamlewo {
  display: block !important;
}

.lewo:hover ~ .prawo {
  display: none;
}

.zamieniamprawo {
  display: none;
}

.lewo:hover ~ .zamieniamprawo {
  display: block !important;
}

.lewo {
  background: red;
  padding: 20px;
}

.prawo {
  background: green;
  padding: 20px;
}

<div class="lewo">
  <h3>Zawartość lewo</h3>
</div>


<div class="prawo">
  <h3>Zawartość prawo</h3>
</div>

<div class="zamieniamlewo">

  <h3 class="imie">zamieniamlewo</h3>

</div>

<div class="zamieniamprawo">

  <h3>zamieniam prawo</h3>

</div>

Answer 1

~ 组合符将两个选择器分开，并且仅当第二个元素位于第一个元素之前时才匹配第二个元素，并且两者共享一个共同的父元素。

例如:

.red ~ p{

  color:red;
}

---

  <p>i m not red</p>
  <p class='red'>i m not red</p>
  <p>i m red</p>
  <p>i m red</p>

此处最后两段与兄弟选择器匹配。

所以在你的代码中你可以改变一些东西

 <div class="prawo">
    <h3>Zawartość prawo</h3>
  </div>

   <div class="lewo">
    <h3>Zawartość lewo</h3>
  </div>

---

并将其添加到.css 文件

.prawo:hover ~ .lewo {
    display:none;
}