[Сергей Ракипов]

Долго не хотел писать сюда, так как мне кажется проблема пустяковая, но все перебрал и не нашел решение.

let main = document.querySelector("main");
let li_1 = document.querySelector("li:nth-child(1)");
let li_2 = document.querySelector("li:nth-child(2)");
let li_3 = document.querySelector("li:nth-child(3)");
let li_4 = document.querySelector("li:nth-child(4)");
let li_5 = document.querySelector("li:nth-child(5)");

li_1.onmouseover = test1;

function test1(){
	main.style.backgroundImage = "url('images/pic6.jpg')";

}

li_1.onmouseout = test2;

function test2(){
	main.style.backgroundImage = "url('images/color.png')";
}

background-image: url("../images/color.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transition: all 2s;

При наведении скорость 2сек, а когда убирает установления скорость пропадает

как сделать что бы и когда мышка уходит скорость тоже была 2 сек.