javascript - How do I make a div visible on hover but disappear on click? - Stack Overflow

admin管理员组

文章数量:1406937

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>

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.

• javascript
• html
• css

Share Improve this question Follow edited Mar 6 at 15:32 DustInComp 2,72611 gold badge99 silver badges2424 bronze badges asked Mar 6 at 13:37 JHinkleJHinkle 20233 silver badges1111 bronze badges 6

• 4 Can you update the question to include a minimal reproducible example as a runnable code snippet which demonstrates the problem you're trying to describe? – David Commented Mar 6 at 13:39
• 1 You've neglected to include any actual javascript here. The function executes but we have no idea what it is supposed to do. – mykaf Commented Mar 6 at 14:04
• I updated the snippet to show js code – JHinkle Commented Mar 6 at 15:06
• 1 What do mean by foo() executes? As is it, foo() doesn't do anything. We can't help if we don't know what the function does. – mykaf Commented Mar 6 at 15:34
• mykay - I did not include content of foo because it has no bearing on my question. The solution below does exactly what I was looking for - it allows the drop-down display to disappear when foo is activated. Thanks for trying. – JHinkle Commented Mar 7 at 18:01

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 1

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>

本文标签： javascriptHow do I make a div visible on hover but disappear on clickStack Overflow