Изменить фоновое изображение при наведении мыши и вернуться к первому изображению - PullRequest
Новая
       17

Изменить фоновое изображение при наведении мыши и вернуться к первому изображению

0 голосов
/ 23 мая 2018

У меня есть 1 div (".grid_home"), внутри которого есть div (".grid_home_inside"), каждый из которых содержит фоновое изображение.

Когда мышь входит в div ".grid_home", я хочу, чтобы фон былпереключитесь между элементами ".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/

Любая помощь будет принята с благодарностью.

Ответы [ 3 ]

0 голосов
/ 23 мая 2018

Просто используйте следующий модифицированный код 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>
0 голосов
/ 23 мая 2018

спасибо @Ahil 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");

    }

});
0 голосов
/ 23 мая 2018 

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