Question

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

HTML：

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

CSS：

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

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

}

JQuery的：

{{1}}

以下是JSFiddle

编辑1：

为了澄清我需要它在它徘徊时添加类，然后当它点击时保持“mouseenter”外观，然后当它重新点击时返回到能够根据“mouseenter”悬停和移动，“mouseleave”。

谢谢！

Answer 1

除了取消绑定事件之外，你可以使用一个布尔变量来点击事件将切换，这将控制是否调用toggleClass：

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

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

Fiddle Example

Answer 2

如果我理解正确的意图，您只需要在点击时切换课程：

import xlsxwriter


# Create an new Excel file and add a worksheet.
workbook = xlsxwriter.Workbook('C:\\Users\\Excel\\Desktop\\book1.xlsx')
worksheet = workbook.add_worksheet()

# Widen the first column to make the text clearer.
worksheet.set_column('A:A', 20)

# Add a bold format to use to highlight cells.
bold = workbook.add_format({'bold': True})

# Write some simple text.
worksheet.write('A1', 'Hello')

# Text with formatting.
worksheet.write('A2', 'World', bold)

# Write some numbers, with row/column notation.
worksheet.write(2, 0, 123)
worksheet.write(3, 0, 123.456)


workbook.close()

Updated JSFiddle showcasing this

希望这有帮助！

修改

根据链接的运行方式，您可以使用jQuery Mobile弹出窗口，而且根本不需要更改绑定。

您需要包含外部脚本：

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

稍微更改一下HTML：

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

与CSS一起：

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

然后，对于jQuery，您只需使用：

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

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

Answer 3

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

这样做时，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');
});

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

3 个答案: