jQuery菜单栏淡入淡出（结果与预期不符）

debugcn 发表于 Dev

用户名

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

詹姆士

检查这是否对您有帮助

小提琴

但是，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');
});