title: Rebind Hover Effect After Click JQuery
body: <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="box" id="box"&gt;
    &lt;h1 class="headline"&gt;ABOUT ME&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.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;
  </code></pre>
  
  <p>}</p>
  
  <p>JQuery:</p>
  
  <pre><code> $(".box").hover(
    function() {
       $(this).toggleClass("box_hover");
     }
   );
  
   $('#box').click(function() {
     $(this).unbind('mouseenter mouseleave');
    });
  </code></pre>
  
  <p>Here is the <a href="https://jsfiddle.net/ch4pxzn2/4/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>EDIT 1:</p>
  
  <p>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".</p>
  
  <p>Thanks!</p>