如何判断鼠标在某元素上??

Question

如题,有没有简洁的代码,用javascript和jquery都可以.问题补充： 我其实是被事件冒泡所难住了,对这个不是很懂. 代码大致如下: <div id='menu'>Product</div> <div id='menubody'> <div>a</div> <div>b</div> <div>c</div> </div> 我想实现,当鼠标移动menu层上时,menybody就显示;鼠标离开menu层或menubody层时,menubody就隐藏, 但是我使用$("#menu").hover(function(){$("#menubody").show();},function(){$("#menubody").hide();}); 在鼠标移到menybody中的层时,有时隐藏,有时显示,比较乱,估计是事件冒泡引起的, 大家有什么好办法改进下?????????

Answer 1

JQ:

hover(over,out)：一个模仿悬停事件的方法（修正了使用mouseout事件的一个常见错误）。
over (Function) : 鼠标移到元素上要触发的函数
out (Function) : 鼠标移出元素要触发的函数
例：鼠标悬停的表格加上特定的类 
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

Answer 2

<script>
function Show()
{
 document.getElementById("menubody").style.visibility="visible";
}
function Hide()
{
 document.getElementById("menubody").style.visibility="hidden";
}
</script>

<div id='menu' onmouseover="Show()" onmouseleave="Hide()">Product</div>
<div id='menubody'>
<div>a</div>
<div>b</div>
<div>c</div>
</div>