[英]jQuery mouseenter simple effect
我想褪色<div class="front">
outand一个<div class="back">
在上悬停,而当用户将鼠标悬停了,我需要但恢复,淡出回来 ,并在前面褪色,我的<div class="back">
不会在mouseleave上淡出。
对不起,新手问题,但我不确定为什么此代码无法正常工作。 这是因为当正面消失时,我需要在背面事件上触发mouseenter吗?
的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>
您有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');
});
$(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>
试试这个,使用悬停功能代替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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.