使用 Jquery 淡入淡出菜单栏（结果不符合预期）答案

【问题标题】：Menubar fadein fadeout with Jquery (results not as expected)使用 Jquery 淡入淡出菜单栏（结果不符合预期）
【发布时间】：2026-02-10 03:35:01
【问题描述】：

我对 jQuery 的淡出淡入效果有疑问：

当我将鼠标悬停在菜单栏中的链接上时，会显示一个 div，其中包含一些内容，但是当我悬停 div 时，会显示该 div 内的所有表格，但首先显示的表格除外。我怎样才能防止这种情况发生？

我创建了一个jsfiddle 页面向您展示。当您将鼠标悬停在“Nud”和“Crepes”上时效果会起作用

html

<body>
  <div class="escondido">
    <ul id="speise">
       <li><a id="frueh" href="">Frühstück</a></li>
       <li><a id="sup"   href="">try1</a></li>
       <li><a id="sal"   href="">try2</a></li>
       <li><a id="nud"    href="">Nud</a></li>
       <li><a id="crep"  href="">Crepes</a></li>
       <li><a id="sueß"  href="">try5</a></li>
    </ul>
  </div>

    <div id="front">
        <table id="probe1">
            <tr>
                <td>something somthing else</td>
                <td></td>
            </tr>
        </table>

        <table id="probe2">
            <tr>
                <td>house</td>
                <td>world</td>
            </tr>
        </table>
    </div>

</body>

css

#probe1, #probe2 {
             display: none;
         }

          #front {
          display:none;
          position:relative;
          height:600px;
          width:100%;
          background-color:lightblue;  

        }

      .escondido{
        position:relative;
        background-color:lightyellow;
        width:100%;
        height:30px;
      }

      #speise a{
        padding:10px;
      }

      #speise{
        position:relative;
        padding:10px;
      }
      #speise li{
        display:inline;
      }

      ul#speise a:hover{
        background-color:lightblue;
      }

javascript

$("#crep, #front").hover(function (e) {
            e.preventDefault();
            $("#front, #probe1").stop().fadeIn();   

         }, 

            function(){
            $("#front, #probe1").stop().fadeOut();
    });


    $("#nud, #front").hover(function (e) {
            e.preventDefault();
            $("#front, #probe2").stop().fadeIn();   

         }, 

            function(){
            $("#front, #probe2").stop().fadeOut();
    });

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

看看这对你有没有帮助

Fiddle

但是 jquery 变大了

$("li a").hover(function(){
   $("li a").removeClass('active');
    $(this).addClass('active');
});

$("#crep, #front").hover(function (e) {
    e.preventDefault();
    $("#front").stop().fadeIn(); 
    if($("#crep").hasClass('active')){
      $("#probe1").css('display','block');
    }
},function(){
     $("#front").stop().fadeOut();
    $("#probe1").css('display','none');
});

$("#nud, #front").hover(function (e) {
     e.preventDefault();
     $("#front").stop().fadeIn();
     if($("#nud").hasClass('active')){
      $("#probe2").css('display','block');
    }
},function(){
     $("#front").stop().fadeOut();
    $("#probe2").css('display','none');
});

【讨论】：

【解决方案2】：

在悬停时隐藏可见表格。

$("#crep, #front").hover(function (e) {
    e.preventDefault();
    $("#probe2").hide();
    $("#front, #probe1").stop().fadeIn();    
}.....
$("#nud, #front").hover(function (e) {
    e.preventDefault();
    $("#probe1").hide();
    $("#front, #probe2").stop().fadeIn();
}......

Updated fiddle here.

【讨论】：

谢谢！.. 这有助于防止在 div 中显示所有内容，但现在它固定为只有一个选项.. 所以在这种情况下，当您查看 div Nud 时，它的工作正常，但是当您查看可丽饼显示 nud 表而不是可丽饼表