在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可能是一個更好的解決方案。