How do I make a div visible on hover but disappear on click?

I am using a drop-down on my nav bar to execute functions.

function foo()
{
  // un-show what hover displayed;
}

.dropdown-content_Mouse {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  z-index: 2;
}

.dropdown-content_Mouse a {
  float: none;
  color: black;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 2vmin;
  padding-top: 1vmin;
  padding-right: 4vmin;
  padding-bottom: 1vmin;
  padding-left: 4vmin;
}
    
.dropdown-content_Mouse a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content_Mouse {
  display: block;
}

<div class="dropdown">
   <button class="dropbtn">  Mouse Actions </button>
   <div class="dropdown-content_Mouse">
      <a href="javascript:foo();">Cancel</a>
      <a href="javascript:foo();">Reset to Original</a>
      <a href="javascript:foo();">Vertical Line</a>
      <a href="javascript:foo();">Clip Right</a>
      <a href="javascript:foo();">Clip Left</a>
      <a href="javascript:foo();">Clip Temp Up</a>
      <a href="javascript:foo();">Clip Temp Down</a>
      <a href="javascript:foo();">Clip Pressure Up</a>
      <a href="javascript:foo();">Clip Pressure Down</a>
  </div>
</div>

The function executes but the dropdown is still visible until the mouse is moved off the dropdown div. I want to have the dropdown not visible as if the mouse caused it.

I've tried making the div display: "none", etc -- all of those will make the div disappear, but hovering will never make it visible again - the hover feature is no longer active.

I've modified the snippet.

When a menu selection is clicked - foo() executes but the dropdown menu selection is still visible. I want to make it disappear "as if" the mouse was moved away from the hover target that made it visible.

Suggestions? Thanks.

Solution

I think, if you want to close the dropdown on click, you'll need to tie its visibility to something other than :hover, like a class you assign and remove manually on mouseenter, mouseleave and click events.

function hideDropdownContent(el) {
  el.classList.remove('dropdown-open')
}

function showDropdownContent(el) {
  el.classList.add('dropdown-open')
}

.dropdown-content_Mouse {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  z-index: 2;
}

.dropdown-content_Mouse a {
  float: none;
  color: black;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 2vmin;
  padding-top: 1vmin;
  padding-right: 4vmin;
  padding-bottom: 1vmin;
  padding-left: 4vmin;
}
    
.dropdown-content_Mouse a:hover {
  background-color: #ddd;
}

.dropdown.dropdown-open .dropdown-content_Mouse {
  display: block;
}

<span class="dropdown" onmouseleave="hideDropdownContent(this)">
   <button class="dropbtn" onmouseenter="showDropdownContent(this.parentElement)">  Mouse Actions </button>
   <div class="dropdown-content_Mouse" onclick="hideDropdownContent(this.parentElement)">
      <a href="javascript:Mouse_Cancel();">Cancel</a>
      <a href="javascript:Mouse_Reset();">Reset to Original</a>
      <a href="javascript:Mouse_VLine();">Vertical Line</a>
      <a href="javascript:Mouse_ClipR();">Clip Right</a>
      <a href="javascript:Mouse_ClipL();">Clip Left</a>
      <a href="javascript:Mouse_ClipTU();">Clip Temp Up</a>
      <a href="javascript:Mouse_ClipTD();">Clip Temp Down</a>
      <a href="javascript:Mouse_ClipVU();">Clip Pressure Up</a>
      <a href="javascript:Mouse_ClipVD();">Clip Pressure Down</a>
  </div>
</span>