* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

동영상에서는 3장의 사진과 1개의 동영상이기에 사진에 해당하는 3장만 마우스를 올리면 텍스트가 보여지고 내리면 감추게 설정을 했는데, 만약 동영상을 삭제하고 그 자리에 사진으로만 4장을 넣어 사진 4장 모두 마우스를 올리고 내리면 텍스트가 보여지고 감추도록 설정하려면 자바스크립트 코드를 어떻게 해야하는지 알려주세요!

        // 텍스트가 보여지는 기능

        // 1. 몇 번째 사진에 마우스가 올라갔는지 확인(if문)

        // 2. 해당 사진을 찾아 hideText class를 지워주고, showText는 삽입해줌

        function showText(number) {

            if (number === 1) {

                document.querySelector("#desc1").classList.remove("hideText");

                document.querySelector("#desc1").classList.add("showText");

            } else if (number === 2) {

                document.querySelector("#desc2").classList.remove("hideText");

                document.querySelector("#desc2").classList.add("showText");

            } else {

                document.querySelector("#desc3").classList.remove("hideText");

                document.querySelector("#desc3").classList.add("showText");

            }

        }

        // 텍스트가 감춰지는 기능

        // 1. 몇 번째 사진에서 마우스가 벗어났는지 확인(if문)

        // 2. 해당 사진을 찾아 shotText class를 지워주고, hideText는 삽입해줌

        function hideText(number) {

            if (number === 1) {

                document.querySelector("#desc1").classList.remove("showText");

                document.querySelector("#desc1").classList.add("hideText");

            } else if (number === 2) {

                document.querySelector("#desc2").classList.remove("showText");

                document.querySelector("#desc2").classList.add("hideText");

            } else {

                document.querySelector("#desc3").classList.remove("showText");

                document.querySelector("#desc3").classList.add("hideText");

            }

        }