javaScript: mouseenter/out event javaScript?-CodePudding

I want to make hover effect whit javaScript I use mouseenter and mouseout event to make button show the content in mouse enter and remove content in mouse out, the problem is the content in mouse enter disappear if the content contains element, but if the content not contains element its work.

 const button = document.querySelector("button"),
                dropdown = document.querySelector(".dropdown");

            button.addEventListener("mouseenter", (e) => {
                dropdown.classList.add("active")

                dropdown.addEventListener("mouseenter", (e) => {
                    dropdown.classList.add("active")
                })

                button.addEventListener('mouseout', () => {
                    dropdown.classList.remove("active")

                    dropdown.addEventListener("mouseout", () => {
                        dropdown.classList.remove("active")
                    })
                })
            })

 * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }

            body {
                display: grid;
                place-items: center;
                height: 100vh;
                font-family: sans-serif;
            }

            button {
                padding: 1em;
                cursor: pointer;
            }

            .dropdown {
                position: absolute;
                width: 100PX;
                height: 200px;
                background-color: red;
                bottom: 52%;
                display: none;
            }

            .dropdown.active {
                display: block;
            }

<html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <button>
            Hover Me
        </button>
        <div >
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
        </div>
    </body>
</html>

CodePudding user response：

Please add you can exchange mouseenter with mouseover It also would works. It's ok?

 const button = document.querySelector("button"),
                dropdown = document.querySelector(".dropdown");

            button.addEventListener("mouseover", (e) => {
                dropdown.classList.add("active")

                dropdown.addEventListener("mouseover", (e) => {
                    dropdown.classList.add("active")
                })

                button.addEventListener('mouseout', () => {
                    dropdown.classList.remove("active")

                    dropdown.addEventListener("mouseout", () => {
                        dropdown.classList.remove("active")
                    })
                })
            })

* {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }

            body {
                display: grid;
                place-items: center;
                height: 100vh;
                font-family: sans-serif;
            }

            button {
                padding: 1em;
                cursor: pointer;
            }

            .dropdown {
                position: absolute;
                width: 100PX;
                height: 200px;
                background-color: red;
                bottom: 52%;
                display: none;
            }

            .dropdown.active {
                display: block;
            }

<html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <button>
            Hover Me
        </button>
        <div >
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
        </div>
    </body>
</html>

CodePudding user response：

Css is better in this case

* {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }

            body {
                display: grid;
                place-items: center;
                height: 100vh;
                font-family: sans-serif;
            }

            button {
                padding: 1em;
                cursor: pointer;
            }
 button:hover   div  {
display:block;
}

            .dropdown {
                position: absolute;
                width: 100PX;
                height: 200px;
                background-color: red;
                bottom: 52%;
                display: none;
            }

            .dropdown:hover {
                display: block;
            }

<html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <button>
            Hover Me
        </button>
        <div >
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
        </div>
    </body>
</html>

CodePudding user response：

II think you only need these two functions to get what you want

 button.addEventListener("mouseenter", (e) => {
    dropdown.classList.add("active")
 })
 dropdown.addEventListener("mouseleave", (e) => {
     dropdown.classList.remove("active")
 })

Try mouseleave in the layer dropdown to remove the class

CodePudding user response：

Details are commented in example

// Reference the <section>
const dropDown = document.querySelector(".dropdown");

// Register the "mouseenter/leave" events to <section>
dropDown.addEventListener("mouseenter", drop);
dropDown.addEventListener("mouseleave", drop);

/**
 * Event handler passes the (e)vent object by default
 * >> If the triggered event is "mouseenter", add "active" class to "this",
 * which is the tag registered to the "mouseenter" event 
 * (<section> aka .dropdown), and then end function
 * >> Otherwise, remove "active" class.
 */
function drop(e) {
  if (e.type === "mouseenter") {
    return this.classList.add("active");
  }
  this.classList.remove("active");
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  /* font-size on <html> will be referenced by the rem unit */
  font: 300 2ch/1.25 "Segoe UI"
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1rem;
  /* 
  Add this to the parent of .dropdown to prevent a sudden shift to the 
  left 
  */
  overflow: scroll;
}

.dropdown {
  /* 
  This will make all absolute positioned children reference the
  <section>'s borders in regards to it's own position (eg <menu>)
  */
  position: relative;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
  padding: 1em;
  font: inherit;
  cursor: pointer;
}

menu {
  /*
  As an absolutely positioned child of <section>, it's position
  (top, bottom, left, right, and z-index) is referenced to <section>
  */
  position: absolute;
  top: 50px;
  list-style: none;
  width: 100px;
  background-color: red;
}

li {
  /* As default, each <li> is flat and invisible */
  height: 0;
  opacity: 0;
  /* This animates the expansion and compression */
  transition: 0.4s ease-in;
}

.active menu {  
  padding: 0.25rem;
}

.active li {
  /* 
  When <section> has the "active" class, each <li> will expand
  and show itself
  */
  height: 1.25rem;
  opacity: 1;
}

<!--
  Wrap everything in a block level tag and treat it as the "dropdown"
-->
<section >
  <button>Hover</button>
  <menu>
    <!-- 
          Only <ul>, <ol>, and <menu> can have <li> as children 
        -->
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
  </menu>
</section>