点击子div里的一个按钮使其消失后，如何使鼠标不默认hover在父div上

Question

<div id="a">
        <div id="b">
            <button id="bb">关闭</button>
        </div>
    </div>
    <script>
        $(function(){
            $("#a").hover(function(){
                $("#b").toggle();
            })
        })
        $("#bb").bind("click",function(){
            $("#b").hide();
        })
    </script>

当点击关闭时，子DIV会短暂的消失后又出现，造成闪烁

Answer 1

感觉你的div的结构有问题，明明是两个平行的div，为什么要做成父子结构

Answer 2

<div id="a"></div><div id="b"><button id="bb">关闭</button></div>

<script>
    $(function(){
        $("#a").hover(function(){
            $("#b").toggle();
        })
    })
    $("#bb").bind("click",function(){
        $("#b").hide();
    })
</script>

a和b用float:left;

Answer 3

不然呢?

把 #b 放到 #a 的外面试试?

Answer 4

能把css贴一下嘛。。

Answer 5

目测，如果需求无误的话，js逻辑是没有问题的，也就是说，问题出在你页面标签上——看你的元素嵌套，再看你的效果图，你是在#a容器内给的#b元素定位实现左右排列的吧？问题就来了，你个父元素#a绑定了hover事件，又要在它的子元素上绑定click事件，而按照事件冒泡的逻辑（你的标签页贴了事件冒泡，说明你在、也清楚问题是出在这里了），是先进入父元素，触发hover事件了。当你点击按钮的时候，你的鼠标依然是停留在#b上面，换言之，你任然触发了#a的hover事件。要解决的话，你可以试试优化一下你的页面结构，把#b提出来做#a的同级元素。或者，你试试阻止click的事件冒泡吧。

Answer 6

试试stopPropagation()方法，阻止事件冒泡
第一段代码改成这样：

$("#a").hover(function(e){
    e.stopPropagation();
    $("#b").toggle();
})