Question

在我的页面上www.damianhunkeler.ch当我将鼠标悬停在图片下方的名称上时，我已经用CSS实现了悬停效果。第一个子LI元素正在页面上显示。当悬停在其他名称上时，第一个元素当前正在被覆盖＆＃34;由例如。第二个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就像这样：

.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元素的伪子元素，使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将鼠标悬停在第二个元素上时隐藏第一个元素

1 个答案: