jquery - 显示 div 并在悬停时保持可见

Question

我现在拥有的是这个小提琴：

http://jsfiddle.net/c2KTZ/

$(document).ready(
        function(){
    $("#showoptions").hover(function () {
    if ( $("#nav").is(":visible")==true) {
        $("#nav").hide();
    }
    else {
        $("#nav").show();
    }        
        });    
     });

但是当用户将鼠标悬停在菜单上时，我无法保持菜单打开。

我希望能够将鼠标悬停在图片上，显示菜单，然后如果用户将鼠标悬停在菜单上，我希望菜单保持可见，直到用户将鼠标悬停在菜单之外。

如果不让我知道，我希望这是有道理的。

Answer 1

已解决 - 这是演示http://jsfiddle.net/c2KTZ/1/

注意：- 图像id="showoptions"adiv创建一个父元素，您可以在其中定义width以css使用 X 轴

此外，您不需要 javascript 来执行此操作，只能使用 css 来完成:hover

无论如何，html中的代码已更改

 <div id="showoptions">
  <img src="images/dropdown.png" width="22px" height="29px" />
  <div id="nav">
   <table width="100%" id="table">
    <tr>
     <td><a href="<?php echo $user_data['username']; ?>">Account</a></td>
  </tr>
  <tr>
            <td><a href="client.php">Workout</a></td>
        </tr>
        <tr>
            <td><a href="logout.php">Logout</a></td>
        </tr>
     </table>
 </div>
</div>

Answer 2

带有更多链接的导航http://jsfiddle.net/c2KTZ/40/

$(document).ready(
        function(){
    $(".link").hover(function () {
    var link = $(this).attr('id');
        var linkid = '#' + link + '-div';
    if ( $(linkid).is(":visible")==true) {
      $('.link').removeClass("active");
        $(linkid).hide();

    }
    else {
        $(linkid).show();
            $(this).addClass("active");
    }        
        });    
     });