Question

我在页面右侧创建了一个垂直菜单，在左侧菜单旁边显示了一个未显示的面板（显示：无）。现在，当我在菜单链接上拖动鼠标时（a：悬停），应该出现右边的面板，但它没有！为什么呢？

HTML：

<div id="menupanel">
 <ul>
  <li>
    <a href="#performance">PERFORMANCE<img src="images/menu.png" /></a>
     <ul>
      <li><h2>PERFORMANCE</h2>
      <p>Are you an artist working in the field of live audiovisual...</p>
      </li>
     </ul>
  </li>
 </ul>
</div>

CSS：

 #menupanel{

margin-top:50px;
width:300px;
padding:0 75px;
clean:both;
 }

 #menupanel h1{
font-size:16px;
color:#FFF;
margin:10px auto;
text-align:center;
 }

 #menupanel h2{
text-align:center;
padding-top:30px;
color:#FFF;
 }

  #menupanel  ul{
list-style: none;
margin: 0;
width: 300px;
  }

  #menupanel ul li a{
display: block;
margin: 0;
padding: 0 3px;
text-decoration: none;
color: #FFF;
background:#05c597;
height:54px;
text-align:center;
line-height:54px;

   }

  #menupanel ul>li a:hover {
color: #FFF;
background: #3c4c55;
  }

  #menupanel li {
position:relative;
background:#05c597;
margin-bottom:15px;
  }

  #menupanel ul li img{
position:relative;
top:5.8px;
height:46%;
right:0px;
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
  }

  #menupanel ul li a:hover img{
right:-50px;
  }

  #menupanel ul li ul{
position: absolute;
top: -10px;
left: 100%;
width: 916px;
display:none;
height:350px;

   }


   #menupanel ul li ul li{
    height:350px;
    background: #3c4c55;
    top:10px;
   }

   #menupanel ul li a:hover ul{
              display:block;

   }

Answer 1

您现在使用#menupanel ul li a:hover ul在代码中执行的操作是尝试定位您的link元素的子列表。但是，您尝试定位的列表不是孩子，而是您的链接元素的兄弟。

您可以使用+选择器定位兄弟。

#menupanel ul li a:hover + ul{display:block;}

或者你可以将悬停状态放在list元素上。

#menupanel ul li:hover ul{display:block;}

任何一个都可以 Fiddle

 #menupanel{

margin-top:50px;
width:300px;
padding:0 75px;
clean:both;
 }

 #menupanel h1{
font-size:16px;
color:#FFF;
margin:10px auto;
text-align:center;
 }

 #menupanel h2{
text-align:center;
padding-top:30px;
color:#FFF;
 }

  #menupanel  ul{
list-style: none;
margin: 0;
width: 300px;
  }

  #menupanel ul li a{
display: block;
margin: 0;
padding: 0 3px;
text-decoration: none;
color: #FFF;
background:#05c597;
height:54px;
text-align:center;
line-height:54px;

   }

  #menupanel ul>li a:hover {
color: #FFF;
background: #3c4c55;
  }

  #menupanel li {
position:relative;
background:#05c597;
margin-bottom:15px;
  }

  #menupanel ul li img{
position:relative;
top:5.8px;
height:46%;
right:0px;
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
  }

  #menupanel ul li a:hover img{
right:-50px;
  }

  #menupanel ul li ul{
position: absolute;
top: -10px;
left: 100%;
width: 916px;
display:none;
height:350px;

   }


   #menupanel ul li ul li{
    height:350px;
    background: #3c4c55;
    top:10px;
   }

   #menupanel ul li:hover ul{
              display:block;

   }

<div id="menupanel">
 <ul>
  <li>
    <a href="#performance">PERFORMANCE<img src="images/menu.png" /></a>
     <ul>
      <li><h2>PERFORMANCE</h2>
      <p>Are you an artist working in the field of live audiovisual...</p>
      </li>
     </ul>
  </li>
 </ul>
</div>

Answer 2

<ul>是<a>的兄弟，而不是孩子。尝试：

#menupanel ul>li a:hover~ul {display:block}

Answer 3

<ul>不是孩子，而是兄弟姐妹。

所以而不是

#menupanel ul li a:hover ul {
 display:block;
}

使用adjacent sibling selector +

#menupanel ul li a:hover+ul {
 display:block;
}

Answer 4

替换：

 #menupanel ul li a:hover ul{
              display:block;
   }

有了这个：

#menupanel ul li a:hover + ul{
              display:block;
   }

了解详情：http://css-tricks.com/child-and-sibling-selectors/

神秘的悬停

4 个答案: