jquery 배경이미지 변경 안됨.

jquery부분에서 css background-image 적용이 안되네요.. 어디가 문제일까요..?

<HTML>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> ex5. 마우스 올리면 배경이미지 변경하게 with JQuery</title>

    <link rel="stylesheet" href="../CSS/ex5.css">

</head>
<body>


    <div class="container">


        <!-- ul : 좀 더 섬세하게 해야 함. (before, after 사용 필요) 
            따라서, div - a태그만 쓰는 것보다, ul - li - a 태그를 써주는 것이 필요 -->
        <ul class="nav">
            <!-- a태그 내 텍스트 : white
                 data-text 텍스트 : 마우스가 올라갔을 때 yellow-green으로 채워짐. -->
            <!-- li는 줄을 바꾸는 역할 (a태그는 가로배치됨 - 그러면 display:block을 줄 것임. 이 경우 텍스트 양 만큼 채워놓지 못함. )-->
            <li data-image="../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-01.jpg">
                <a href="#none" data-text="ABOUT">ABOUT</a>
            </li>
            <li data-image="../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-02.jpg">
                <a href="#none" data-text="INSTRUCTOR">INSTRUCTOR</a>
            </li>
            <li data-image="../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-03.jpg">
                <a href="#none" data-text="CLASS">CLASS</a>
            </li>
            <li data-image="../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-04.jpg">
                <a href="#none" data-text="LOCATION">LOCATION</a>
            </li>
        </ul>

            <!-- photo가 nav보다 앞에 있으므로, z-index를 줄 필요가 없음. 가장 뒤에 존재. ㅇ-->
            <div class="photo"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../jquery/ex5.js"></script>

</body>
</html>

<CSS>

/* 구글폰트 - Fredoka */
@import url('https://fonts.googleapis.com/css2?family=Fredoka&family=Nanum+Pen+Script&display=swap');

/* Google Web Fonts CDN */
/* font-family: 'Noto Sans KR', sans-serif */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');

body{
    font-family: Fredoka;
    margin:0;
    color: #222;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    /* background-color: #000; */
}

a{
    text-decoration: none;
    color: #222;
}

.container{

}

.photo{
    background-image: url('../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-initial.jpg');
    background-repeat : no-repeat;
    background-position: center center;
    background-size:cover;
    /* 독립 속성으로 작성 : 이유 ) Jquery에서 bakcground-image만 변경하기 위함 
       (background는 이 모든것을 한번에 쓸 수 있음) */

    position: absolute;
    top:0; left:0;
    width: 100%; height: 100%;

    transition:0.5s;
}

.nav{
}

.nav li{
    list-style: none;
   
}

.nav li a{
    color: #fff;
    position: relative;
    font-size: 4em;
    z-index:100;
   
}

.nav li a:before{
    position: absolute;
    top: 0; left: 0;
    width: 0;
    overflow: hidden; /* 감춰지도록 */

    content:attr(data-text); /* a태그의 data-text 내용을 받아옴 */
    color: yellowgreen;

    transition:0.5s;
}

.nav li a:hover:before{
    width: 100%;
}

<JQUERY>

// mouseenter = hover
$('.nav li').mouseenter(function(){
    var changeImage = $(this).attr('data-image')
    // data-img는 변수가 아니고 속성이기 때문에, ' ' 내에 입력되어야 함.

    $('.photo').css({
        'background-image':'url('+ changeImage +')'
    });
})

$('.nav li').mouseleave(function(){
    $('.photo').css({
        'background-image' :''
    })
})

인프런 커뮤니티 질문&답변