Question

我制作了一个导航栏，可以在悬停时更改照片。当我将鼠标悬停在链接（第一级菜单）上但当我将鼠标悬停在下拉列表（第二级菜单）上时，照片会消失。将鼠标悬停在主菜单和子菜单（下拉列表）上时如何使照片保持不变。当我将鼠标悬停在子菜单上时，照片不会消失。

我想在不使用JavaScript的情况下实现这一点，纯粹使用CSS。

nav{
    background-color: #fff;
    width:150px;
    height: 667px;
    float:right;
}

nav h1{
    padding: 20px;
    color: #777;
    font: 20px tahoma,times,serif;

}
ul {
 position: relative;
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px;
 text-align: right;
 }
ul li {
 position: relative;
 }
li ul {
 position: absolute;
 right: 149px;
 top: 0;
 display: none;
 }
ul li a {
 display: block;
 text-decoration: none;
 color: #777;
 background: #fff;
 padding: 5px;

 border-bottom: 0;
 }
ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px;

 }
li:hover ul {
     display: block;
}

* {
    margin: 0;
    padding: 0;
}
body {
    background: #333;
    background: url("http://vignette1.wikia.nocookie.net/logopedia/images/6/69/FC-Barcelona-old-logo.png/revision/latest?cb=20120211172615");
    background-repeat: no-repeat;
}

.container{
    overflow: hidden;
    margin-right: 0;
    height: 500px;
     -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
    box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
    width: 800px;
}
.container img{
    margin-top: 0px auto;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -60;
    height: 500px;
    width: 800px;
}
.container li img {
    opacity: 0.5;
    margin-top: 0px auto;
    position: absolute;
    left: 0px;
    z-index: -50;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;   
}

li:nth-child(1){
    padding-top: 0px;
}

li a:hover {
    background: #eee;
}

li a:hover + img {
    opacity: 1;
    position: fixed;
    margin-top: 0px auto;
    left: 0px auto;
    height: 500px;
    width: 800px;
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <LINK rel=stylesheet type="text/css" href="StyleSheet.css"/>
        <title></title>
    </head>
    <body>
        <div class="container">
        <nav><h1><b>ברצלונה</b></h1>
  <ul>
  <li><a href="#">ברצלונה</a><img src="http://media3.fcbarcelona.com/media/asset_publics/resources/000/160/456/size_640x360/pic_2015-01-11_BARCELONA-ATLETICO_45.v1431011244.JPG" alt="1"></li> 
  <li><a href="#">לה ליגה</a><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTd6ngNNGapdLhqdS4KbuoNNCaaUMP4Svu-e_9rXMh_wLDtPpSE" alt="1">
      <ul> 
      <li><a href="#">ברצלונה</a></li> 
      <li><a href="#">ריאל</a></li> 
      <li><a href="#">אתלטיקו</a></li> 
      </ul>
      
    </li> 
  <li><a href="#">בונדסליגה</a><img src="http://static3.demotix.com/sites/default/files/imagecache/a_scale_large/2000-5/photos/1368393557-club-atletico-de-madrid-v-fc-barcelona--la-liga_2046465.jpg" alt="1"> 
      <ul> 
      <li><a href="#">באיירן</a></li> 
      <li><a href="#">וולפסבורג</a></li> 
      <li><a href="#">הנדובר</a></li> 
      <li><a href="#">דורטמונד</a></li>  
      </ul> 
    </li>
  <li><a href="#">סיירה א</a><img src="http://barcelonacamps.com/wp-content/uploads/2014/04/barca-new-team.jpg" alt="1"> 
      <ul> 
      <li><a href="#">אינטר</a></li> 
      <li><a href="#">מילאן</a></li> 
      <li><a href="#">יובה</a></li> 
      <li><a href="#">רומא</a></li> 
      </ul> 
      </ul>
    </li> 
            </nav>
        </div> 
    </body>
</html>

Answer 1

请参阅此fiddle

只需在CSS中进行以下微小更改..

替换

li a:hover + img {
    opacity: 1;
    position: fixed;
    margin-top: 0px auto;
    left: 0px auto;
    height: 500px;
    width: 800px;
}

与

li:hover a +img {
  opacity: 1;
  position: fixed;
  margin-top: 0px auto;
  left: 0px auto;
  height: 500px;
  width: 800px;
}

此外，您的<li>和<ul>标记最后未正确关闭。在</li>之前加</ul>。

将鼠标悬停在导航栏下的链接上时如何继承照片？

1 个答案:

请参阅此fiddle