Изменение фонового изображения при наведении и активном

Question

Я новичок в этом и надеялся на помощь. Я хочу, чтобы фон оставался после того, как вы наведете одну из ссылок. Также возможно сделать затухание/переход на фоне при появлении?

$(document).ready(function() { 
 
    
 
    $('#change').hover(function() { 
 
     $('body').css('background-image', 'url("http://i.imgur.com/cyxXVpT.jpg")'); 
 
    }, function() { 
 
     $('body').css('background', ''); 
 
    }); 
 
    
 
    $('#change2').hover(function() { 
 
     $('body').css('background-image', 'url("http://i.imgur.com/5MupbQ2.jpg")'); 
 
    }, function() { 
 
     $('body').css('background', ''); 
 
    }); 
 
});

body { 
 
    background-repeat: repeat; 
 
    background-size:cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<a href="#" id="change">Change</a> 
 
<br> 
 
<a href="#" id="change2">Change2 </a>

Answer 1

Если вы хотите фон, чтобы остаться, просто использовать событие MouseEnter только

$('#change').on('mouseenter', function() { 
    $('body').css('background-image', 'url("http://i.imgur.com/cyxXVpT.jpg")'); 
}); 

Если вы хотите выцветанию фоны, вы можете использовать CSS переходы

-webkit-transition: background ease-in 1s; 
-moz-transition: background ease-in 1s; 
-o-transition: background ease-in 1s; 
transition: background ease-in 1s; 

FIDDLE

Answer 2

Если вы хотите, чтобы фон не использовал 2-й параметр функции наведения Первый параметр over - когда вы наводите объект на объект, а второй на размытие. https://api.jquery.com/hover/ Можно исчезать с помощью функции анимации https://api.jquery.com/animate/

EDIT: или переход с CSS, как adeneo сказал