jQuery - 扩展菜单

Question

我想了解以下内容。我有几个小图像，如果鼠标位于其中一张图像上，则 div 或一些按钮应该变得可见。但是，如果鼠标移动到另一个图像，则应显示另一个 div(按钮)，并隐藏旧的 div。如果未选择任何图像，则不应显示任何内容。 jQuery 库中有没有函数可以执行类似的操作？

我尝试使用 mouseover 函数和 toogle() 来完成此操作。但问题是，当鼠标离开图像时，最近显示的 div 又被隐藏了。此外，如果我将 div 设置为在 mouseover 上可见，即使选择了另一个图像，它仍然会显示。

<div id="Div1">This is div1</div>
<div id="Div2">This is div2</div>​

当鼠标移到“div1”上时，应显示“div2”，直到鼠标离开“div1”或“div2”。这意味着，如果鼠标移到“div2”上(鼠标离开“div1”)，“div2”仍应显示。

Answer 1

听起来你想要jQuery hover 。由于您的问题不包含代码，因此很难提供准确的答案，但这符合您所描述的内容。

$(document).ready(function() {
    $("#myDiv").hover(
      function() {
        $("#otherDiv").show();
      }, 
      function() {
        $("#otherDiv").hide();
      }
    );
});

jsFiddle DEMO

编辑

$(document).ready(function() {
    $("#wrapper").hover(
      function() {
        $("#otherDiv").show();
      }, 
      function() {
        $("#otherDiv").hide();
      }
    );
});​

CSS:

#otherDiv {
    display: none;
}

HTML:

<div id="wrapper">
    <div id="myDiv">hover me</div>
    <div id="otherDiv">stuff</div>
</div>​

Updated Demo