单击JQuery后重新绑定悬停效果

Question

所以我有这个元素#box，它需要有一个悬停效果，当悬停时会自行移动。该元素将在 jQuery 中使用 .hover 正确悬停，然后我需要单击它以显示某些内容，但是单击它后它应该不再具有悬停效果，因此我使用 .unbind 将其删除。现在，当用户重新单击元素时，它将隐藏信息，然后重新应用悬停效果。所以就像一个切换效果。我的问题是最干净的方法是什么。

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');
  });

这里是JSFiddle

编辑 1：

为了澄清我需要它在悬停时添加类，然后在单击时保持“mouseenter”外观，然后在重新单击时返回能够基于“mouseenter”悬停和移动, "鼠标离开"。

谢谢！

Answer 1

除此之外，您可以使用布尔变量来取消绑定事件，单击事件将切换该变量，该变量将控制是否调用 toggleClass：

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

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

Fiddle Example

Answer 2

当元素具有.hover-effect 类时，您可以将mouseenter/mouseleave 事件委托给该元素。然后，您可以在单击元素时切换该类。

这样做时，mouseenter/mouseleave 事件只会在元素具有 .hover-effect 类时触发，并且由于该类在单击时切换，因此您实际上是在绑定和取消绑定每个悬停事件点击。

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');
});

Answer 3

如果我正确理解了意图，您只需在点击时切换类：

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

Updated JSFiddle showcasing this.

希望这会有所帮助！

编辑

根据链接的功能，您可以使用 jQuery Mobile 弹出窗口，您根本不需要更改绑定。

您需要包含外部脚本：

<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>

稍微改变你的 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>

连同你的 CSS：

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

然后，对于 jQuery，您可以简单地使用：

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

我创建了一个展示 here 的新 JSFiddle。