Question

我遇到了transition: all 1s;的麻烦它仅在我mouseover时显示，但对于mouseout，则不会显示效果。

我像这样使用jQuery

$(".menu-inside ul").on('mousemove', function(e) {
  if ((e.pageX - this.offsetLeft) < $(this).width() / 1) {
    $('.menu').addClass('lightactive');
  } else {
    $('.menu').removeClass('lightactive');
  }
}).on('mouseout', function(){           
	
});

.menu .level1 {
  left:0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
  width:0;
}
.menu.lightactive .level1 {
  background:rgba(0,0,0,0.5);
  top:0;
  bottom:0;
  left:0;
  position:fixed;
  z-index:25;
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m1 menu">
  <div class="gothic menu-center" id="menu-center">
    <div class="menu-inside">
      <div class="mn-btn">
        <div class="menubtn">
          <p class="btnmn">
            <span class="m1"></span>
            <span class="m2"></span>
            <span class="m3"></span>
          </p>
        </div>
      </div>
      <ul>
        <li><a class="" href="#header"><span>01</span><span>Menu1</span></a></li>
        <li><a href="#profile" class="active"><span>02</span><span>Menu2</span></a></li>
        <li><a href="#quote"><span>03</span><span>Menu3</span></a></li>
        <li><a href="#work"><span>04</span><span>Menu4</span></a></li>
      </ul>
    </div>
  </div>
  <div class="level1"></div>
  <div class="level2"></div>
</div>

.menu是父框。非常感谢你的帮助。

Answer 1

仅在width课程中保留lightactive，在menu课程本身内保留其他人。所以它会很好地显示宽度过渡。另一件事是在mouseover

中使用mousemove事件

注意： -

在鼠标移动时，它仍然打开和关闭。这不是因为鼠标移动。但由于您的遮罩层位于事件目标（level1）
之外

＆＃13;
＆＃13;
$(".menu-inside ul").on('mouseover', function(e) { if ((e.pageX - this.offsetLeft) < $(this).width() / 1) { $('.menu').addClass('lightactive'); } else { $('.menu').removeClass('lightactive'); } }).on('mouseleave', function(){ if ($('.menu').hasClass('lightactive')) { $('.menu').removeClass('lightactive'); } });
＆＃13;
.menu .level1 { -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; position:fixed; top:0; bottom:0; left:0; width:0; background:rgba(0,0,0,0.5); z-index:25; } .menu.lightactive .level1 { width:100%; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="m1 menu"> <div class="gothic menu-center" id="menu-center"> <div class="menu-inside"> <div class="mn-btn"> <div class="menubtn"> <p class="btnmn"> <span class="m1"></span> <span class="m2"></span> <span class="m3"></span> </p> </div> </div> <ul> <li><a class="" href="#header"><span>01</span><span>Menu1</span></a></li> <li><a href="#profile" class="active"><span>02</span><span>Menu2</span></a></li> <li><a href="#quote"><span>03</span><span>Menu3</span></a></li> <li><a href="#work"><span>04</span><span>Menu4</span></a></li> </ul> </div> </div> <div class="level1"></div> <div class="level2"></div> </div>
＆＃13;
＆＃13;
＆＃13;

removeClass并保持效果转换jQuery

1 个答案: