javascript - 使用：hover制作下拉框，但是鼠标一移动到下拉框然后就消失了？

Question

我的demo在这
用css伪类做的https://jsfiddle.net/mcguvgy4/，
用jquery做的https://jsfiddle.net/mcguvgy4/1/.
不知为何都遇到这种情况，无法选中下拉框的内容？

Answer 1

你触发的hover是<a href="#" class="show" >AAA</a>的，显然当鼠标离开a标签的时候li列表就会隐藏掉了。你将class="show"放到a的父元素li上试一下。

Answer 2

.ul1>li:hover .ul2{
    display:block;
}

这里检测的是li

<a href="#" class="show">AAA</a>

$(function(){
  $(".show").hover(function(){
    $(".ul2").show();
  },function(){
     $(".ul2").hide(); 
  });
});

这里检测的是a

Answer 3

html这样改

<li>
        <a href="#" class="show">AAA
        <ul class="ul2">
            <li>BBBBBB</li>
            <li>BBBBBB</li>
            <li>BBBBBB</li>
            <li>BBBBBB</li>
        </ul>
        </a>
    </li>

css

.show:hover>.ul2{...}

Answer 4

用 :hover 做是可以了，但是你用错层级关系了，应该用 li 来控制，而不是 a ，a 和 子菜单 ul 都是 li 的子元素，所有滑到 a 和 ul 上都算 :hover ，而你用 a 来控制，滑到 ul 上，a 就不是 :hover 了