在CSS上悬停第二个元素时隐藏第一个元素

Question

在我的页面www.damianhunkeler.ch当悬停在图片下方的名称上时，我已经使用CSS实现了悬停效果。第一个子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是这样的：如何achiving这个

.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; 
} 

任何TIPP（如果可能的话，在所有CSS）是当然高度赞赏... 非常感谢，克里斯

Answer 1

This isn用你现在的标记只用CSS是不可能的 - 没有办法匹配前面的兄弟姐妹。唯一的兄弟选择我知道比赛的直接下面的兄弟姐妹 - https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

因此，无论用js或者你可以创造一切，除了第一其它li元素的伪子元素，使UL相对位置，然后放置您的子元素绝对要覆盖第一个里面的蓝色边框。

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可能是一个更好的解决方案。