悬停子菜单时停止衰落效应

Question

一个div (子菜单)出现在一个元素悬停在菜单栏中的褪色效果，在悬停它停留在那里，但第一，褪色效果发生，我不希望褪色效果发生。当在div(子菜单)上徘徊时，div(子菜单)应该停留在那里。

​

/*sub menu*/
$(document).ready(function(){
    $(".main-courses").hover(function(){
        $(".sub-courses").fadeToggle(1000);
    });
    
});

.sub-courses{
    display: none;
    padding: 20px;
    border: 2px solid red;
    background-color: #fff;
    z-index: 289;
    position: fixed;
    top: 50px;
    width: 100%;
}

.sub-courses:hover {
    display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<li><a ui-sref="#" class="main-courses">COURSES <span class="caret"></span></a></li>

<!-- sub menu -->
        <div class="container-fluid sub-courses">
            <div class="row">
                <div class="col-xs-12 col-xs-2">
                    one
                </div>
                <div class="col-xs-12 col-xs-2">
                    two
                </div>
            </div>
        </div>

​

​

我也尝试了鼠标切换和鼠标退出事件，但没有用。

Answer 1

如果要保持淡出效果，可以通过在javascript中添加以下内容来使用stop()方法。

$('.sub-courses').mouseover(function(){
        $(".sub-courses").stop(true,true);
    })

​

$(document).ready(function(){
    $(".main-courses").hover(function(){
        $(".sub-courses").fadeToggle(1000);
    });
    
    $('.sub-courses').mouseover(function(){
    	$(".sub-courses").stop(true,true);
    })
    
});

.sub-courses{
    display: none;
    padding: 20px;
    border: 2px solid red;
    background-color: #fff;
    z-index: 289;
    position: fixed;
    top: 50px;
    width: 100%;
}

.sub-courses:hover {
    display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a ui-sref="#" class="main-courses">COURSES <span class="caret"></span></a></li>

<!-- sub menu -->
        <div class="container-fluid sub-courses">
            <div class="row">
                <div class="col-xs-12 col-xs-2">
                    one
                </div>
                <div class="col-xs-12 col-xs-2">
                    two
                </div>
            </div>
        </div>

​

Answer 2

只需将时间从1000更改为0。

​

/*sub menu*/
$(document).ready(function() {
  $(".main-courses").hover(function() {
    $(".sub-courses").fadeToggle(0);
  });

});

.sub-courses {
  display: none;
  padding: 20px;
  border: 2px solid red;
  background-color: #fff;
  z-index: 289;
  position: fixed;
  top: 50px;
  width: 100%;
}

.sub-courses:hover {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<li><a ui-sref="#" class="main-courses">COURSES <span class="caret"></span></a></li>

<!-- sub menu -->
<div class="container-fluid sub-courses">
  <div class="row">
    <div class="col-xs-12 col-xs-2">
      one
    </div>
    <div class="col-xs-12 col-xs-2">
      two
    </div>
  </div>
</div>

​

Answer 3

您不应该使用.fadeToggle()，而应该只使用.toggle()。参数1000是动画的持续时间。移除它会产生你想要的效果。

​

/*sub menu*/
$(document).ready(function(){
    $(".main-courses").hover(function(){
        $(".sub-courses").toggle();
    });
    
});

.sub-courses{
    display: none;
    padding: 20px;
    border: 2px solid red;
    background-color: #fff;
    z-index: 289;
    position: fixed;
    top: 50px;
    width: 100%;
}

.sub-courses:hover {
    display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<li><a ui-sref="#" class="main-courses">COURSES <span class="caret"></span></a></li>

<!-- sub menu -->
        <div class="container-fluid sub-courses">
            <div class="row">
                <div class="col-xs-12 col-xs-2">
                    one
                </div>
                <div class="col-xs-12 col-xs-2">
                    two
                </div>
            </div>
        </div>

​