Question

概述：当鼠标悬停在div A上时，div B会淡入。然后你可以将你的移动移动到div B.

我对我的演示中的所有特性感到满意，但有些问题我无法克服。我想我是从错误的角度接近它。

我面临的问题：

有时子菜单会被双切换。 （要重现：将鼠标悬停在Button1上，将鼠标移动到子菜单1，将鼠标移回Button1，然后从Button1的顶部退出。） GIF screen capture
如果将鼠标从按钮移动到其子菜单太快，则子菜单fadeIn会中断，它会立即弹出。的 GIF screen capture
使用CSS3可以实现同样的效果（div A调用div B）吗？

Jquery的

$( "#button1" ).hover(function() {
  $( "#submenu1" ).stop().fadeToggle(1000, function() {
  });
});

$( "#button2" ).hover(function() {
  $( "#submenu2" ).stop().fadeToggle(1000, function() {
  });
});

$( "#button3" ).hover(function() {
  $( "#submenu3" ).stop().fadeToggle(1000, function() {
  });
});


$( ".chain" ).mouseenter(function() {
    $(this).stop().fadeIn(0);  
});

$( ".chain" ).mouseout(function() {
    $(this).stop().fadeOut(1000);  
});

HTML

<div id="button_container">
<div id="button1">Button 1</div>
<div id="button2">Button 2</div>
<div id="button3">Button 3</div>

<div id="submenu1" class="chain">Submenu 1</div>
<div id="submenu2" class="chain">Submenu 2</div>
<div id="submenu3" class="chain">Submenu 3</div>
</div>

CSS

#button_container {
margin-top:100px;
margin-left:50px;
}

#button1,#button2,#button3 {
display:inline-block;
background-color:LightBlue;
font-size:30px;
cursor:pointer;
}

.chain {
display:none;
}

#submenu1 {
background:red;
width:200px;
height:100px;
position:fixed;
}
#submenu2 {
background:blue;
width:300px;
height:200px;
position:fixed;
}
#submenu3 {
background:orange;
width:400px;
height:300px;
position:fixed;
}

Answer 1

据我所知，你的代码似乎有很多动画中断。我不认为在这种情况下你应该使用.hover而是.mouseenter和.mouseleave。

检查此代码：

$(document).ready(function() {

    $("#button1").mouseenter(function() {
        $("#submenu1").stop().fadeIn();
         }).mouseleave(function() {
      $( "#submenu1" ).stop().fadeOut(300);
    });   

    $("#button2").mouseenter(function() {
        $("#submenu2").stop().fadeIn();
         }).mouseleave(function() {
        $( "#submenu2" ).stop().fadeOut(300);
    }); 

     $("#button3").mouseenter(function() {
        $("#submenu3").stop().fadeIn();
         }).mouseleave(function() {
      $( "#submenu3" ).stop().fadeOut(300);
    });    

    $("#submenu1, #submenu2, #submenu3").mouseenter(function() {
        $(this).stop().fadeIn(0);  
    });

    $( "#submenu1, #submenu2, #submenu3" ).mouseout(function() {
        $(this).stop().fadeOut(300);  
    });

});

http://jsfiddle.net/t1c76m6g/1/

至于为什么当你盘旋sub div时它会立即消失，这很简单。你使用.stop（）并取消影响该选择器的所有其他动画。将它与.fadein（0）结合使用即可得到图片。

使用css影响其他div是不可能的;您可以使用以下方法解决问题。

jQuery：FadeToggle + div一个调用div B.

1 个答案: