0

Подскажите пожалуйста такой вопрос, при наведении на блок меняю фон страницы и обратно соответственно, хотелось плавное анимации, попытался установить transition на класс блока где будет меняться фон, вроде бы всё работает, но если переход фона не успел завершиться и я увожу мышь с блока, переход на оригинальный фон происходит мгновенно, как можно решить этот вопрос

$(oneimg).hover(
  function() {
    $('.wrapper').css('background-image', 'url(img/1.jpg)')
  }, 
  function() {
    $('.wrapper').css('background-image', 'url(css/2.jpg)')
  });
2
  • добавьте код, как у вас transition прописан
    – Alexandr
    26 окт 2021 в 16:13
  • .wrapper { -webkit-transition: 1s; transition: 1s; } 26 окт 2021 в 16:31

1 ответ 1

0

Пример реализации без js:

div{
background: url('https://www.planetware.com/wpimages/2020/02/france-in-pictures-beautiful-places-to-photograph-eiffel-tower.jpg');
height: 500px;
width: 500px;
transition:all 1s;
background-size:cover;
}
.bg{
background: url('https://www.planetware.com/wpimages/2020/02/france-in-pictures-beautiful-places-to-photograph-mont-st-michel.jpg');
transition:all 1s;
opacity: 100;
}
.bg:hover{
transition:all 1s;
opacity: 0
}
<div><div class = 'bg'></div></div>

2
  • Имеется ввиду что в блоке div1 есть еще один блок div2. И мне нужно при наведении на div2 изменить фон div1 26 окт 2021 в 17:12
  • Добавьте ваш html, тогда можно будет более точно ответить на вопрос
    – Alexandr
    26 окт 2021 в 20:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.