<!DOCTYPE html>
<html>
    <head>
        <title>여행 사이트</title>
        <meta charset="utf-8">
        <link href="styles.css" rel="stylesheet">
    </head>

    <body>
        <img id='logo' src="images/logo.png">

        <div id="menu">
            <a id="home">Home</a>
            <a id="seoul">Seoul</a>
            <a id="paris">Paris</a>
            <a id="tokyo">Tokyo</a>
        </div>

        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <script>
            $('#home').on('click', clickHome);
            $('#seoul').on('click', clickSoeul);
            $('#paris').on('click', clickParis);
            $('#tokyo').on('click', clickTokyo);

            $('#image').on('mouseenter', mouseEnterImage);
            $('#image').on('mouseleave', mouseLeaveImage);

            function clickHome() {
                $('#image').attr('src', 'images/home.png');
                $('#home').css('font-weight', 'bold');
                $('#seoul').css('font-weight', 'normal');
                $('#paris').css('font-weight', 'normal');
                $('#tokyo').css('font-weight', 'normal');
            }
            
            function clickSoeul() {
                $('#image').attr('src', 'images/seoul.png');
                $('#home').css('font-weight', 'normal');
                $('#seoul').css('font-weight', 'bold');
                $('#paris').css('font-weight', 'normal');
                $('#tokyo').css('font-weight', 'normal');
            }

            function clickParis() {
                document.getElementById('image').src = 'images/paris.png';
                document.getElementById('home').style.fontWeight = 'normal';
                document.getElementById('seoul').style.fontWeight = 'normal';
                document.getElementById('paris').style.fontWeight = 'bold';
                document.getElementById('tokyo').style.fontWeight = 'normal';
            }

            function clickTokyo() {
                document.getElementById('image').src = 'images/tokyo.png';
                document.getElementById('home').style.fontWeight = 'normal';
                document.getElementById('seoul').style.fontWeight = 'normal';
                document.getElementById('paris').style.fontWeight = 'normal';
                document.getElementById('tokyo').style.fontWeight = 'bold';
            }

            function mouseEnterImage() {
                $('#image').css('box-shadow', '5px 10px');
            }

            function mouseLeaveImage() {
                $('#image').css('box-shadow', 'none');
            }
        </script>

        <div>
            <img id="image" src="images/home.png">
        </div>
    </body>
</html>
강의내용대로 자바스크립트 코드를 지우고 jQuery로 고쳤습니다.
클릭은 잘 작동하지만, 그림자 나오는 부분은 작동하지 않습니다.
그대로 했는데 이유를 도저히 모르겠어요