在 mouseenter 上更改背景图像，然后返回第一个图像答案

【问题标题】：Change Background image on mouseenter, and back to first image在 mouseenter 上更改背景图像，然后返回第一个图像
【发布时间】：2018-05-23 08:52:34
【问题描述】：

我有 1 个 div (".grid_home")，里面有 div (".grid_home_inside")，每个都包含一个背景图片。

当鼠标进入“.grid_home” div时，我希望背景在div“.grid_home_inside”之间切换，并在到达最后一个“.grid_home_inside”时返回第一个“.grid_home_inside”。

到目前为止，这是我尝试过的，但我无法循环并返回到第一个元素。

$(".grid_home").mouseenter(function() {
  $(".displayed").next(".grid_home_inside").addClass("displayed").prev(".grid_home_inside").removeClass("displayed");
})

section .grid_home {
  width: 50vw;
  height: 50vh;
  position: relative;
}

.grid_home_inside {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
}

.grid_home_inside.displayed {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="grid_home">
    <div class="grid_home_inside displayed" style="background: url(https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG) no-repeat center center;background-size:cover;"></div>
    <div class="grid_home_inside" style="background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0A3u74LuIJ6OgDXWY4yWW_4F9bXs_VHTKfxdn-vhjWTlBnz-a) no-repeat center center;background-size:cover;"></div>
    <div class="grid_home_inside" style="background: url(http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2015/10/151027_BA_blue-sky.jpg.CROP.promo-xlarge2.jpg) no-repeat center center;background-size:cover;"></div>
  </div>
</section>

这是一个 jsFiddle https://jsfiddle.net/kz08vvt0/

任何帮助将不胜感激。

【问题讨论】：

如果你希望它只显示两个图像（正常状态和悬停状态）第三个div 的目的是什么？另外，如果您确实只想要两个状态，那么我建议修改它以仅使用 CSS
@RoryMcCrossan 我不想只显示 2 张图片......它可以是 3 张或更多。否则我肯定会使用 css。

标签： jquery loops background-image mouseenter

【解决方案1】：

$(".grid_home").mouseenter(function(){
  const grid_home_inside =Array.from($(".grid_home_inside"));
  const div_count=grid_home_inside.length;
  let image_changed_flag=false;
  grid_home_inside.forEach((el,i)=>{
    if(el.classList.contains('displayed')&&!image_changed_flag) {
        image_changed_flag=true;
        el.classList.remove('displayed');
        grid_home_inside[(i===(div_count-1))?0:i+1].classList.add('displayed');
    }
  });
})

section .grid_home {
    width: 50vw  ;
    height: 50vh;
    position:relative;
}

.grid_home_inside {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
}

.grid_home_inside.displayed {

    opacity: 1;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>

  <div class="grid_home">

      <div class="grid_home_inside displayed" style="background: url(https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG) no-repeat center center;background-size:cover;"></div>

      <div class="grid_home_inside" style="background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0A3u74LuIJ6OgDXWY4yWW_4F9bXs_VHTKfxdn-vhjWTlBnz-a) no-repeat center center;background-size:cover;"></div>

      <div class="grid_home_inside" style="background: url(http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2015/10/151027_BA_blue-sky.jpg.CROP.promo-xlarge2.jpg) no-repeat center center;background-size:cover;"></div>

  </div>

</section>

【讨论】：

【解决方案2】：

感谢@Akhil Karthikeyan 和@Smaranjit Maiti

我最终得到了这段代码，就像一个魅力：

$(".grid_home").mouseenter(function(){

    var $grid_home = $(this),
        $first = $grid_home.find(".grid_home_inside" ).first(),
        $last = $grid_home.find(".grid_home_inside" ).last(),
        $displayed = $grid_home.find(".displayed"),
        $next = $displayed.next('.grid_home_inside'),
        $prev = $next.prev(".grid_home_inside");

    if( $next.length == 0 ) {

        $first.addClass("displayed");
        $last.removeClass("displayed");

    } else {

        $next.addClass("displayed");
        $prev.removeClass("displayed");

    }

});

【讨论】：

【解决方案3】：

只需使用以下修改后的 jquery 代码（此解决方案适用于任何数量的图像）-

$(".grid_home").mouseenter(function() {
  if ($(".displayed").next(".grid_home_inside").attr('class') != null) {
    $(".displayed").next(".grid_home_inside").addClass("displayed").prev(".grid_home_inside").removeClass("displayed");
  } else {
    $(".grid_home_inside").last().removeClass("displayed");
    $(".grid_home_inside").first().addClass("displayed");
  }
})

section .grid_home {
  width: 50vw;
  height: 50vh;
  position: relative;
}

.grid_home_inside {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
}

.grid_home_inside.displayed {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>

  <div class="grid_home">

    <div class="grid_home_inside displayed" style="background: url(https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG) no-repeat center center;background-size:cover;"></div>

    <div class="grid_home_inside" style="background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0A3u74LuIJ6OgDXWY4yWW_4F9bXs_VHTKfxdn-vhjWTlBnz-a) no-repeat center center;background-size:cover;"></div>

    <div class="grid_home_inside" style="background: url(http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2015/10/151027_BA_blue-sky.jpg.CROP.promo-xlarge2.jpg) no-repeat center center;background-size:cover;"></div>

  </div>

</section>

【讨论】：