Question

我总共有3个div。 一个div总是出现，但当鼠标进入div1 时会出现剩余的两个div。这是一个使用jQuery的演示。

Demo使用jQuery

但它无法正常工作。 鼠标在动画完成之前进入/离开，提供错误的功能。所以我尝试使用CSS3，但动画无法正常工作。使用CSS进行演示。

Demo使用CSS

以下是代码：

Html ：

<div class='holder'>
    <div class="menu" id="m1"></div>
    <div class="menu" id="m2"></div>
    <div class="menu" id="m3"></div>
</div>

CSS ：

    .menu {
            top:10px;
            margin: 0;
            padding:0px;
            width: 40px;
            height:40px;
            border-radius: 100%;
            display: inline-block;
            background-color: #34495e;
            transition: 1s;
            position: absolute;
        }

        #m1 {
            z-index: 1000;
        }

        #m2, #m3 {
            z-index: 1;
        }


        .menu:hover {
            background-color: #3498db;
        }

        .menu:hover ~ div:nth-child(3n), .menu:hover ~ div:nth-child(2n){
            position:relative;
            left: 50px;
            margin-left: 10px;
        }

如何解决探测？如何使用适当的动画和鼠标事件移动div？

Answer 1

不要进行计算以删除您添加的边距量，只需将其设置为0。

这使用jQuery方法。

$(document).ready(function() {
   $('#m2').hide();
   $('#m3').hide();

   $('#m1').one('mouseenter', function() {
     $('#m2').show();

     //$('#m2').addClass('show');
     $('#m2').animate({

       'marginLeft': "+=45px" //moves right
     });
     $('#m3').show();

     //$('#m2').addClass('show');
     $('#m3').animate({

       'marginLeft': "+=90px" //moves right
     });
   });

   $('.holder').mouseleave(function() {
     $('#m3').animate({

       'marginLeft': "0px" // sets margin back to 0
     });
     $('#m2').animate({

       'marginLeft': "0px" // sets margin back to 0
     });
   });
 });

.menu {
   top: 10px;
   margin: 0;
   padding: 0px;
   width: 40px;
   height: 40px;
   border-radius: 100%;
   display: inline-block;
   background-color: #34495e;
   transition: 1s;
   position: absolute;
 }
 #m1 {
   z-index: 1000;
 }
 #m2,
 #m3 {
   z-index: 1;
 }
 .holder {
   display: block;
 }
 #m1:hover {
   background-color: #3498db;
 }
 .show {
   transition: 1s;
   position: relative;
   background-color: red;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='holder'>
  <div class="menu" id="m1"></div>
  <div class="menu" id="m2"></div>
  <div class="menu" id="m3"></div>
</div>

移动div不能正常工作

1 个答案: