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

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

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

a和b用float:left;

不然呢?

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

能把css贴一下嘛。。

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

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

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