javascript - jQuery mouseenter简单效果

Question

我正在尝试淡化 <div class="front">出乎意料<div class="back">悬停时进入，当用户悬停时，我需要恢复、淡出后并淡入前，但是我的<div class="back">鼠标离开时不会淡出。

很抱歉新手问题，但我不确定为什么这段代码不起作用。是因为我需要在前面淡出的时候触发后面事件的mouseenter吗？

http://jsfiddle.net/8xo8c5pn/

HTML

$(".front").mouseenter(function() {
    $(this).removeClass('on').addClass('off');
    $(this).next().removeClass('off').addClass('on');
});

$(".back").mouseleave(function() {
    $(this).removeClass('on').addClass('off');
    $(this).prev().removeClass('off').addClass('on');
});

.on{
    display:inherit;
}
.off{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<figure>
  <div class="front">
   <img src="http://vignette3.wikia.nocookie.net/jadensadventures/images/5/54/Pokemon-Ash-s-Pikachu-Riley-Sir-Aaron-s-Lucarios-pokemon-guys-10262907-563-579.jpg/revision/latest?cb=20120902022940">
    <div class="cover">
       <div class="">Hello</div>
     </div>
 </div>
 <div class="back off">
<div class="back box-style-1 off-color-bg">
 <i class="fa fa-leaf"></i><p></p>
 <h2>im the back</h2>
<p>Some text</p>
 </div>
</div>

 </figure>

Answer 1

你有 2 个带有类 back 的元素，所以使用 .back.off 而不是仅仅 .back

试试这个

$( ".front" ).mouseenter(function() {
    $(this).removeClass('on').addClass('off');
    $(this).next('.back.off').removeClass('off').addClass('on');
});

$( ".back.off" ).mouseleave(function() {
    $(this).removeClass('on').addClass('off');
    $(this).prev('.front').removeClass('off').addClass('on');
});

DEMO