jQuery mouseenter 简单效果答案

【问题标题】：jQuery mouseenter simple effectjQuery mouseenter 简单效果
【发布时间】：2015-12-04 14:49:59
【问题描述】：

我试图在悬停时淡出 <div class="front"> 和 <div class="back">，当用户悬停时我需要恢复，淡出 back 并淡入 front，但是我的<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>

【问题讨论】：

也试试这个：jsfiddle.net/8xo8c5pn/4 我建议给项目 div 一个固定的高度/宽度，这样它就不会不断调整大小和弄乱 mouseenter 和 mouseleave 事件

标签： javascript jquery html

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

此外，您需要确保元素的大小完全相同。例如，当您向下移动鼠标时，背景 div 仍然显示

【解决方案3】：

试试这个，使用悬停功能代替鼠标进入和离开：

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

【讨论】：