Javascript jQuery mouseenter简单效果

我试图在鼠标悬停时淡出

和淡入

，当用户在鼠标悬停时，我需要恢复、淡出后和淡入前，但是我的

不会在鼠标悬停时淡出

很抱歉，这是一个新手问题，但我不知道为什么这个代码不起作用。这是因为我需要在前部淡出时触发后部鼠标指针事件

HTML

$（“.front”）.mouseenter（函数（）{
$（this）.removeClass（'on'）.addClass（'off'）；
$（this）.next（）.removeClass（'off'）.addClass（'on'）；
});
$（“.back”）.mouseleave（函数（）{
$（this）.removeClass（'on'）.addClass（'off'）；
$（this.prev（）.removeClass（'off'）.addClass（'on'）；
});
.on{
显示：继承；
}
.关{
显示：无；
}

你好

我在后面
一些文本

尝试此操作，使用悬停功能代替鼠标输入并离开：

<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();
});


$（“.album”）。悬停(
函数（）{//IN
$（this.find（'.front'）.hide（）；
$（this.find（'.cover'）.show（）；
}，函数（）{//OUT
$（this.find（'.front'）.show（）；
$（this.find（'.cover'）.hide（）；
});
您有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');
});


$（文档）.ready（函数（）{
$（“.back”）.hide（）；//最初隐藏回
$（“.front”）.mouseenter（函数（）{
$（“.back”）.show（）；
$（this.hide（）；
});
$（“.back”）.mouseleave（函数（）{
$（“.front”）.show（）；
$（this.hide（）；
});
});
.back，
.前线{
边框：1px纯红；
}

你好

我在后面
一些文本

也试试这个：我建议给item div一个固定的高度/宽度，这样它就不会一直调整大小，弄乱mouseenter和mouseleave事件。此外，您需要确保元素的大小完全相同。例如，当您向下移动鼠标时，背景div仍然显示