Question

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();
    });
});

Answer 1

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

以下是工作解决方案：

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

DEMO： http://jsfiddle.net/e8GYJ/

Answer 2

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

查看此代码......

希望这可以帮助你

Answer 3

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

Answer 4

尝试使用hover功能：

$("li").hover(
  function () {
     $(this).find(".sub-menu").show();
  }, 
  function () {
     $(this).find(".sub-menu").hide();
  }
);

显示/隐藏li的相应部分内容？

4 个答案: