Question

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

$(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"和div创建一个父元素，您可以在width中定义css以使用X轴

而且你不需要使用javascript来执行此操作，只能使用:hover

的css来完成

无论如何，代码在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");
    }        
        });    
     });

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

2 个答案: