How can I make my dropdown menu remain open when user is hovering over the div but close when they stop?

TrevoltIV 0
Viewed 24

My dropdown menu works, but essentially my menu button is what I'm using as the event for showing the menu, and i set it up so when you hover over the menu, it stays open but if you just hover over the button and then move your mouse without touching the menu with your mouse, it stays open and doesn't close.

function showMenu(){
    document.getElementById("dropdown-menu").style.display = "block";
}

function hideMenu(){
    document.getElementById("dropdown-menu").style.display = "none";
}
javascript
1 Answers

You can attach same class to the 2 DOM elements and attach event listener using the class. This a simple sample

document.querySelector('.demo').addEventListener('mouseover', event => {
  document.getElementById("box").style.borderColor="#2be28d";
})
button {
  background-color: #8a2be2;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  
}

.box {
  margin-top: 10px;
  width: 100px;
  height: 50px;
  border: 2px solid #8a2be2;
  border-radius: 5px;
}
<!DOCTYPE html>
<html lang="en">

<body>
  <button class="demo">Click me</button>
  <div class="demo box" id="box"></div>
</body>

</html>

Kaneki210
Related