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類的元素，因此請使用.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');
});

演示

Answer 2

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

Answer 3

試試這個，使用懸停功能代替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();
});