Question

我遇到了使用jQuery的fadeout fadein效果问题：

当我将鼠标悬停在菜单栏中的某个链接上时，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();
    });

Answer 1

在悬停时隐藏可见表格。

$("#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.

Answer 2

检查这是否对您有所帮助

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

使用Jquery的菜单栏淡出淡出（结果不如预期）

2 个答案:

Fiddle