Rebind Hover Effect After Click JQuery

Question

So I have this element #box that needs to have a hover effect that displaces itself when hovered. The element will hover correctly using .hover in jQuery, then I need it to be clicked to display something, but after its clicked it should not have the hover effect anymore, so I used .unbind to remove it. Now when the user reclicks the element it will hide the info and then reapply the hover effect. So like a toggle effect. My question is what is the cleanest way to do this.

HTML:

<div class="box" id="box">
  <h1 class="headline">ABOUT ME</h1>
</div>

CSS:

.box {
height: 320px;
width: 320px;
background-color: rgba(0, 0, 0, 0.6);
position: relative;
left: 10px;
top: 10px;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}

.headline {
margin: 0 auto;
color: white;
text-align: center;
display: block;
padding-top: 130px;
font-family: 'Montserrat', sans-serif;
}

.box_hover {
left: 0px;
top: 0px;
height: 300px;
width: 300px;

}

JQuery:

 $(".box").hover(
  function() {
     $(this).toggleClass("box_hover");
   }
 );

 $('#box').click(function() {
   $(this).unbind('mouseenter mouseleave');
  });

Here is the JSFiddle

EDIT 1:

To clarify I need it to add the class when its hovered on, then when its clicked maintain the "mouseenter" appearance, then when its re-clicked go back to being able to be hovered and moving based on the "mouseenter", "mouseleave".

Thanks!

Spencer Wieczorek · Accepted Answer · 2017-01-29 21:55:24Z

1

Other then unbinding the event you can use a Boolean variable which the click event would toggle, that would control if toggleClass is called or not:

var bind = true;
$(".box").hover(
  function() {
    if(bind) $(this).toggleClass("box_hover");
  }
);

$('#box').click(function() {
    bind = !bind;
});

Fiddle Example

answered Jan 29, 2017 at 21:55

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh Crozier · Accepted Answer · 2017-01-29 21:47:47Z

0

You could delegate the mouseenter/mouseleave events on the element when it has the .hover-effect class. Then you can toggle that class when clicking on the element.

In doing so, the mouseenter/mouseleave events will only be triggered when the element has the .hover-effect class, and since the class is toggled on click, you are essentially binding and unbinding the hover event on each click.

Updated Example

$(document).on('mouseenter mouseleave', '.box.hover-effect', function (event) {
  $(this).toggleClass("box-hover", event.type === 'mouseenter');
});

$('.box').on('click', function() {
  $(this).toggleClass('hover-effect');
});

answered Jan 29, 2017 at 21:47

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Comments

Obsidian Age · Accepted Answer · 2017-01-29 21:56:50Z

0

If I understand the intent correctly, you simply need to toggle the class on click as well:

$('#box').click(function() {
  $(this).unbind('mouseenter mouseleave');
  $(this).toggleClass("box_hover");
});

Updated JSFiddle showcasing this.

Hope this helps!

EDIT

Depending on how the link will function, you could use a jQuery Mobile popup, and you wouldn't need to change the bindings at all.

You'll need to include the external scripts:

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

And slightly change your HTML:

<div class="box" id="box">
  <h1 class="headline"><a href="#aboutme" data-rel="popup">ABOUT ME</a></h1>
</div>

<div data-role="popup" id="aboutme" class="ui-content">
  <h3>Welcome!</h3>
  <p>Popup content</p>
</div>

Along with your CSS:

.headline a {
  text-decoration: none;
  color: inherit !important;
}

Then, for the jQuery, you can simply use:

$('#box').click(function() {
  $(this).toggleClass("box_hover");
});

I've created a new JSFiddle showcasing that here.

edited Jan 29, 2017 at 21:56

answered Jan 29, 2017 at 21:46

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

2 Comments

Jiroscopes Over a year ago

This makes the movement based on the click once its been clicked. It needs to Hover, then when its clicked remove the hover, then when its re-clicked apply the hover. So it returns to its original "pre-clicked" state.

Obsidian Age Over a year ago

I've updated my answer showcasing a solution that has an initial hover, loses the hover on click (and opens a popup), then re-gains the hover once the popup is closed :)

Collectives™ on Stack Overflow

Rebind Hover Effect After Click JQuery

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related