0

hmtl代码： 

  <div id="nav">
 <ul>
 <li><a href="#">test 1</a></li>
 <li><a href="#">test 2</a>
  <div class="sub-nav">
  <p> <a href="#">link </a>  <a href="#">link </a> <a href="#">link </a>  </p>
  </div>

  </li>
 <li><a href="#">test 3</a>
  <div class="sub-nav">
  <p> <a href="#">link2 </a>  <a href="#">link3</a> <a href="#">link4 </a>  </p>
  </div>

</li>
 <li><a href="#">test 4</a></li>
 </ul>
  </div>

我想当鼠标悬停在li上时，它会显示相应的部分内容（sub-nav）。当鼠标移开 li 时，相应的部分将被隐藏。

.sub-menu css is display:none;

以下是我的代码，但不起作用。

$(function(){

    $("#nav ul li").mouseenter(function() {
       $(this).find(".sub-menu").show();
    });
});
4

4 回答 4

1

检查您.sub-menu在 CSS 和 JavaScript 中是否有类，但.sub-nav在标记中。

这是工作解决方案：

$("#nav ul li").hover(function() {
    $(this).find(".sub-nav").show();
}, function() {
    $(this).find(".sub-nav").hide();
});​

演示：http: //jsfiddle.net/e8GYJ/

于 2012-05-11T10:06:25.860 回答
1 
$("#nav ul li").mouseenter(function() {
       $(this).find(".sub-menu").show();
    }.mouseleave(function(){
      $(this).find(".sub-menu").hide();
    });

看看这段代码...

希望这对你有帮助

于 2012-05-11T10:07:30.773 回答
0

尝试hover()事件回调：http ://api.jquery.com/hover/

于 2012-05-11T10:05:07.327 回答
0

尝试用户悬停功能：

$("li").hover(
  function () {
     $(this).find(".sub-menu").show();
  }, 
  function () {
     $(this).find(".sub-menu").hide();
  }
);
于 2012-05-11T10:07:58.187 回答