的jQuery的mouseenter簡單效果

Question

我想褪色<div class="front"> outand在懸停<div class="back">，當用戶將鼠標懸停了，我需要恢復，淡出回和淡入前，但是我<div class="back">沒有淡出在mouseleave上。

對不起，新手問題，但我不知道爲什麼這段代碼不工作。這是因爲當前端淡出時，我需要在後退事件中觸發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.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

Answer 2

試試這個，使用懸停功能代替了mouseenter和離開：

<div class"album"> 
    <div class"front"> 
    </div> 
    <div class"cover" style="display:none;"> 
    </div> 
</div> 

$(".album").hover(
function() { // IN 
    $(this).find('.front').hide(); 
    $(this).find('.cover').show(); 
},function() { // OUT 
    $(this).find('.front').show(); 
    $(this).find('.cover').hide(); 
}); 

Answer 3

$(document).ready(function() { 
 
    $(".back").hide(); //hide back initially 
 
    $(".front").mouseenter(function() { 
 
    $(".back").show(); 
 
    $(this).hide(); 
 
    }); 
 

 
    $(".back").mouseleave(function() { 
 
    $(".front").show(); 
 
    $(this).hide(); 
 
    }); 
 

 
});

.back, 
 
.front { 
 
    border: 1px solid red; 
 
}

<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>