css - 子组合器选择器中的 css 第一个元素

Question

我有这样的代码：

section#secondSite {
    visibility: hidden;
}

section:hover ~ section#secondSite {
    visibility: visible;
}

那行得通。但是，我必须在第一个选择器中更加精确，因为我有 3 个主要部分。无论我尝试什么，它都不再起作用了。例如：

section#section1:hover ~ section#secondSite {
section.section1:hover ~ section#secondSite {
.section1:hover ~ section#secondSite {
section[id="section1"]:hover ~ section#secondSite {

我做错了什么？

//编辑：

这是简化的html：

   <section id="container">
<section id="section1"><a href="#secondSite">
<h3>Rehabilitacja domowa</h3>
<hr>
<img src="pliki/fizykoterapia.jpg" alt="fizykoterapia">
Rybnik i okolice
</a>
</section>

    <section>
<h3>Gabinet<br>rehabilitacji</h3>
<hr>
<img src="pliki/fizykoterapia.jpg" alt="fizykoterapia">
    some address data
</section>

    <section>
<h3>Gabinet<br>masażu</h3>
<hr>
<img src="pliki/fizykoterapia.jpg" alt="fizykoterapia">
    some address data
</section>

    </section>         <!-- HERE SECTION CONTAINER ENDS -->

    <!-- SECOND SITE -->

    <section id="secondSite">
<section>