I have a course card section, on which i want to show he popup of details about that course card, so that i attached an mouseenter and mouseleave events on that element, but it is creating a flickering effect.

`

// Generating course card -
const generateCourseCard = (course, parent) => {
    const newCourse = document.createElement("div");
    newCourse.classList.add("courses");
    newCourse.id = course.id;

    newCourse.innerHTML = `
            <img src=${course.img} class="courseImages" alt=${course.title}>
            <div class="course-Content">
                <h4 class="course-title">${course.title}</h4>
                <p class="course-Instructor">${course.instructor}</p>
                <p>${course.Rating}</p>
                <p>${course.price}</p>
                <p>${course.tag}</p>
            </div>   
    `

    // Adding Hover eventListener to show preview -
    newCourse.addEventListener("mouseenter", (event) => {
        courseCardPopup.style.display = "block";
    });

    newCourse.addEventListener("mouseleave", (event) => {
        courseCardPopup.style.display = "none";
    });

    // Adding to Parent -
    parent.appendChild(newCourse);
}

Suffering from flickering effect