Друзья, есть 6 иконок(блоки div) обернутых в общий фон.
Требовалсь сделать чтоб при наведении на один из 6 блоков менялся фон на соответствующий.
Ниже код который написал, но при быстром наведении на иконки свойство transition не работает, картинки резко меняются. Если подождать пока пройдет 1 секунда то нормально. Как исправить данный баг?
$('.bg1').hover(function() {
$('.bg_banner').css({
'background' : 'url(files/banner-head/1.jpg) top center / cover no-repeat',
'transition' : 'background 1s ease'
});
});
$('.bg2').hover(function() {
$('.bg_banner').css({
'background' : 'url(files/banner-head/2.jpg) top center / cover no-repeat',
'transition' : 'background 1s ease'
});
});
$('.bg3').hover(function() {
$('.bg_banner').css({
'background' : 'url(files/banner-head/3.jpg) top center / cover no-repeat',
'transition' : 'background 1s ease'
});
});
$('.bg4').hover(function() {
$('.bg_banner').css({
'background' : 'url(files/banner-head/4.jpg) top center / cover no-repeat',
'transition' : 'background 1s ease'
});
});
$('.bg5').hover(function() {
$('.bg_banner').css({
'background' : 'url(files/banner-head/5.jpg) top center / cover no-repeat',
'transition' : 'background 1s ease'
});
});
$('.bg6').hover(function() {
$('.bg_banner').css({
'background' : 'url(files/banner-head/6.jpg) top center / cover no-repeat',
'transition' : 'background 1s ease'
});
});
Средний
