使用CSS将鼠标悬停在第二个元素上时隐藏第一个元素

在我的页面上，当鼠标悬停在图片下方的名字上时，我用CSS实现了悬停效果。第一个子LI元素显示在页面上。当鼠标悬停在其他名称上时，第一个元素当前正被例如第二个li元素“覆盖”。这基本上没问题，只是当鼠标悬停在第二个、第三个等元素上时，名称正下方的第一个小（10px）浅蓝色边框没有被隐藏

在其他元素上悬停时，是否有方法隐藏第一个li元素

我当前的html代码如下所示

<div class="mensch-img">
<ul>
    <li><img src="images/georges_theiler1.png"></li>
    <li><img src="images/yvonne_ruckli1.png"></li>
    <li><img src="images/mark_bachmann1.png"></li>
    <li><img src="images/rudei_staeger1.png"></li>
    <li class="last"><img src="images/josef_kreyenbuehl.png"></li>
</ul>
<ul>
    <li>
        <a href="#">Georges<br>Theiler</a>
        <ul>
            <li><a href="#"></a></li>
            <li class="slogan1"><a href="#">... weil er sich in der politischen Debatte durchzusetzen weiss. Das hat er als finanzpolitischer Leader der FDP-Fraktion im Kantonsrat bewiesen.<br><span class="small">STAENDERAT | LUZERN</span></a></li>
        </ul>
    </li>

    <li>
        <a href="#">Yvonne<br>Ruckli</a>
        <ul>
            <li><a href="#"></a></li>
            <li class="slogan1"><a href="#">... weil er geradlinig ist und konsequent liberal politisiert.<br>Ganz wie wir Jungfreisinnige.<br><span class="small">PRAESIDENTIN JUNGFREISINNIGE STADT LUZERN</span></a></li>
        </ul>
    </li>

    <li>
        <a href="#">Mark<br>Bachmann</a>
        <ul>
            <li><a href="#"></a></li>
            <li class="slogan1"><a href="#">... weil er ein erfahrener Unternehmer ist und weiss, was es braucht,<br>um den Kanton Luzern wirtschaftlich voran zu bringen.<br><span class="small">UNTERNEHMER | LUZERN</span></a></li>
        </ul>
    </li>

    <li>
        <a href="#">Ruedi<br>Staeger</a>
        <ul>
            <li><a href="#"></a></li>
            <li class="slogan1"><a href="#">... weil er durch und durch ein Sportsmann ist.<br>Das wirkt sich positiv auf seine Art zu politisieren aus.<br><span class="small">PRAESIDENT FC LUZERN</span></a></li>
        </ul>
    </li>

    <li class="last">
        <a href="#">Josef<br>Kreyenbuehl</a>
        <ul>
            <li><a href="#"></a></li>
            <li class="slogan1"><a href="#">... weil unsere Politik Leute braucht, die geerdet sind, <br>aber auch offen für Neues. Damian Hunkeler ist beides.<br><span class="small">PRAESIDENT BAECKERMEISTERVERBAND LUZERN</span></a></li>
        </ul>
    </li>
</ul>

任何关于如何实现这一点的技巧（如果可能的话，使用CSS）当然都是高度赞赏的。。。

---

非常感谢，Chris

这不可能单独使用CSS和您当前的标记-无法匹配前面的兄弟姐妹。我所知道的唯一同级选择器与以下直接同级匹配-

因此，要么使用js，要么可以创建除第一个li元素之外的所有其他li元素的伪子元素，将ul位置设置为相对位置，然后将子元素的绝对位置设置为覆盖第一个li上的蓝色边框

ul {
  position: relative;
}
li:first-child {
  /* As is */
}
li:nth-child(n+2):hover::before { /* Will select all but the first */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 10px; /* You'll need to adjust this to suit */
  width: 100%; /* You'll need to adjust this to suit */
  background: #FFF;
}

---

只要你的尺寸是固定的，这就行了，但是它使用了魔法数字来表示高度，所以js可能是一个更好的解决方案。

我不认为只有css可以直接做到这一点。可能您可以采取一些变通办法，例如每隔一个li:hover（第一个除外）添加一个白色块，它出现在第一个li的蓝色框上方的第一个li点中。

ul {
  position: relative;
}
li:first-child {
  /* As is */
}
li:nth-child(n+2):hover::before { /* Will select all but the first */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 10px; /* You'll need to adjust this to suit */
  width: 100%; /* You'll need to adjust this to suit */
  background: #FFF;
}