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

Question

在我的页面上 www.damianhunkeler.ch当悬停在图片下方的名称上时，我已经使用 CSS 实现了悬停效果。第一个子 LI 元素显示在页面上。当悬停在其他名称上时，第一个元素当前正被 eg“覆盖”。第二李元素。这基本上没问题，只是当鼠标悬停在第二个、第三个等元素上时，名称正下方的第一个小 (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 是这样的:

.mensch-img img {
border: 1px solid #0c51a0;
border-bottom:none;
border-radius: 12px 12px 0px 0px;
}

.mensch-img ul{
padding: 0;
list-style: none;
}

.mensch-img ul li{
float: left;
width: 122px;
text-align: center;
margin-right:17px;
margin-top:-4px;
}

.mensch-img ul li.last{
float:right;
margin-right:0px;
}

.mensch-img ul li a {
height:40px;
display: block;
padding: 6px 0px 0px 0px;
color: #fff;
background: #0c51a0;
text-decoration: none;
font-family:'MS-Light';
font-size:0.9375rem;
font-size:15px;
}

.mensch-img ul li a:hover{
color: #fff;
}

.mensch-img ul li ul{
display: none;
}

.mensch-img ul li:first-child ul {
display:block;
}

.mensch-img ul li:first-child ul li a{
background: #009EE3;
height:10px;
}

.mensch-img ul li:hover ul{
display: block;
}

.mensch-img ul li:hover ul li a {
background: #009EE3;
height:10px;
}

.mensch-img ul li:hover ul li.slogan1 a{
background: #009EE3;
height:65px;
width:71%;
position:absolute;
left:29%;
padding-top:10px;
line-height:130%;
font-size:0.875rem;
font-size:14px; 
}


.mensch-img ul li:first-child ul li.slogan1 a{
background: #009EE3;
height:65px;
width:71%;
position:absolute;
left:29%;
padding-top:10px;
line-height:130%;
font-size:0.875rem;
font-size:14px; 
}   


.small {
font-size:0.75rem;
font-size:12px;
font-family:'MS-LightCond';
letter-spacing:1px;
}

任何关于如何实现这一点的提示(如果可能的话，使用 CSS)当然非常感谢......非常感谢，克里斯

Answer 1

单独使用 CSS 和您当前的标记是不可能的 - 无法匹配前面的同级标记。我所知道的唯一兄弟选择器匹配直接跟随的兄弟 - https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

因此，要么使用 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;
}

只要你的尺寸是固定的，这就可以工作，但它对高度使用了魔数(Magic Number)，所以 js 可能是更好的解决方案。