jquery remove hover after click?

Question

I have a drop down menu. When the mouse hovers over the parent menu, the child links apear below. The child links remain until the mouse is moved out of the menu element. The hover is removed and the child links dissapear.

I've tried using

$(":hover").blur();

But this is not working.

I'm guessing this is because the item does not have focus applied. Just :hover. Is there a way to remove :hover from jquery?

Thanks

Edit to include html/css

<div class="menu-item">
  <button class="dropdown">Dropdown</button>
  <div class="dropdown-menu">
    <a href="#">Anchor 1</a>
    <a href="#">Anchor 2</a>
  </div>
</div>

and CSS

.dropdown {
  background-color: #04AA6D;
  color: white;
  font-size: 16px;
}

.menu-item {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-menu a {
  color: black;
  display: block;
}

.menu-item:hover .dropdown-menu {
  display: block;
}

This is a sample of the menu. My actual Menu is much bigger. When the visitor hovers over the dropdown the menu show. When they click anyway on the menu I am trying to get the menu to close. As if the hover as been removed.

I have tried blue, mouseout.

The menu still shows after clicking, and only closes after the user scrolls out of the menu, as the menu is so large, this isnt alway possible.

Thanks

This feels like an XY problem, is the real problem hiding them menu after a click? It would probably be clearer if you include a minimal reproducing example of the menu structure. — DBS
– DBS, Commented Nov 30, 2021 at 9:48
If it's a hover issue you could just use css for it. I'll follow DBS and say give the code. — Dejan.S
– Dejan.S, Commented Nov 30, 2021 at 9:50

Nitin S · Accepted Answer · 2021-11-30 16:57:01Z

You can use jQuery mouseenter and mouseleave events to achieve that, run below code snippet or check the updated fiddle here

$(document).ready(function () {
  $('.menu-item a').click(function (e) {
    $(this).parents(".dropdown-menu").hide();
    console.log("clicked");
  });
  
  $(".menu-item").on({
    mouseenter: function () {
        $(this).find(".dropdown-menu").show();
    },
    mouseleave: function () {
        $(this).find(".dropdown-menu").hide();
    }
});
});

.dropdown {
  background-color: #04AA6D;
  color: white;
  font-size: 16px;
}

.menu-item {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-menu a {
  color: black;
  display: block;
}

.menu-item:hover .dropdown-menu {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="menu-item">
  <button class="dropdown">Dropdown</button>
  <div class="dropdown-menu">
    <a href="javascript:void(0)">Anchor 1</a>
    <a href="javascript:void(0)">Anchor 2</a>
  </div>
</div>

fdomn-m · Accepted Answer · 2021-11-30 11:17:43Z

You can add a class with style display:none (don't use .hide()) then remove that class with a setTimeout.

The setTimeout gives the DOM time to apply the display:none to the menu and thus remove the hover so when the class is removed it's not shown again as the parent no longer has :hover.

$(".menu-item .dropdown-menu").addClass("hidden");
setTimeout(() => $(".hidden").removeClass("hidden"), 1);

$("a").click(function() {
  $(".menu-item .dropdown-menu").addClass("hidden");
  setTimeout(() => $(".hidden").removeClass("hidden"), 1);
  // return false for demo as href="#" don't want to reload the page
  return false;
});

.dropdown {
  background-color: #04AA6D;
  color: white;
  font-size: 16px;
}

.menu-item {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-menu a {
  color: black;
  display: block;
}

.menu-item:hover .dropdown-menu {
  display: block;
}
.menu-item:hover .dropdown-menu.hidden {
  display: none;
}

/* show when the menu has :hover applied */
.menu-item:hover { border:1px solid yellow; }
.menu-item { border:1px solid red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-item">
  <button class="dropdown">Dropdown</button>
  <div class="dropdown-menu">
    <a href="#">Anchor 1</a>
    <a href="#">Anchor 2</a>
  </div>
</div>

Could equally use requestAnimationFrame instead of setTimeout.

requestAnimationFrame(() => $(".hidden").removeClass("hidden"));

It's a bit meh, but might get you going until a better answer comes along. Updated fiddle.

Collectives™ on Stack Overflow

jquery remove hover after click?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related