神秘的悬停答案

【问题标题】：The mysterious hover神秘的悬停
【发布时间】：2014-07-25 03:27:36
【问题描述】：

我在页面右侧创建了一个垂直菜单，在左侧菜单旁边创建了一个未显示面板（显示：无）。现在，当我将鼠标拖动到菜单链接（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;

   }

【问题讨论】：

你能提供一个jsfiddle吗？我只是复制/粘贴你的代码，我看到你的图像在你放入 css 的过渡中“移动”
忽略早期答案并接受迟到答案的任何特殊原因都是现有答案的重复..？
对不起，TJ，感谢您及时正确的帮助！

标签： html css menu hover pseudo-class

【解决方案1】：

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

您可以使用+ 选择器来定位同级。

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

或者您可以将悬停状态放在列表元素上。

#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>

【讨论】：

@Alex 很高兴为您提供帮助 :) 如果它帮助您解决了您的问题，请接受我的回答 :)

【解决方案2】：

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

所以不是

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

使用adjacent sibling selector+

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

替换：

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

有了这个：

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

【讨论】：