How to make html hover over image

Ive been trying to fix my code for ages no matter how much i hover over the hamburger menu image the cursor just woudnt change:

    <div class="header">
        <nav>
            <h1 class="nav1">CEA</h1>
            <h1 class="line"></h1>
            
        </nav>
        <nav class="nav">
            <div class="nav-left "> <!--active-->
                
                <ul>
                    <li class="nav-link"> <a class="large" href="#">About</a></li>
                    <li class="nav-link"> <a class="large" href="#">Our Work</a></li>
                    <li class="nav-link"> <a class="large" href="#">Contact</a></li>
                    <li class="nav-link"> <a class="small" href="#">Web Design</a></li>
                    <li class="nav-link"> <a class="small" href="#">eCommerce</a></li>
                    <li class="nav-link"> <a class="small" href="#">Blog</a></li>
                </ul>
                    <div class="contact">
                        <p class="large">Get in touch</p>
                        <p class="small">0302101290391</p>
                        <p class="small">[email protected]</p>
                    </div>  
            </div>
            <div class="nav-right "> <!--active-->
                
            </div>
            <img src="Imagesmenu.png" alt="menu" class="menu" style="z-index: 10;">
        </nav>

        
    </div>

my css:

.header{
    height: 110px;
}

.menu{
    display: inline;
    height: 80px;
    position: fixed;
    top: 8px;
    right: 48px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    transition: 0.5;
}

idk if my js is affectign this code but heres my js:

const menuTog = document.querySelector(".menu");
const nav = document.querySelector(".nav");
const navLeft = document.querySelector(".nav-left");
const navRight = document.querySelector(".nav-right");
const navLinks = Array.from(document.querySelectorAll(".nav-links"));
const contact = document.querySelector('.contact');
const logo = document.querySelector('.logo');

menuTog.addEventListener('click', () => {
    menuTog.classList.toggle('active');
    nav.classList.toggle('active');
    navLeft.classList.toggle('active');
    navRight.classList.toggle('active');
    logo.classList.toggle('active');

    contact.classList.remove('active');
    navRight.classList.remove('active');

    if (menuTog.classList.contains('active')) {
        setTimeout(() => {
            navRight.classList.add('active');
        }, 100)
    }
});

I already addded pointer cursor in the div but it still woudnt work. I already added the .menu:hover but it still woudnt work idk whats wrong with my code if theres someone out there that could help me than please do thank you.