javascript - 用.hoverIntent替换MouseOver

首先，我道歉...我之前曾发布过这个问题，但是我在解释它时做得很糟糕。我在将hoverIntent插入以下JavaScript时遇到问题...我需要它来替换下面的mouseenter和mouseleave函数。明确地说，我正在寻求帮助，因为我对JavaScript语法不太满意。下面的第二个代码片段似乎应该工作，但是它什么也没做，并且在Internet Explorer中似乎已完全消失。

if (jQuery.browser.msie === true) {
  jQuery('#top_mailing')
    .bind("mouseenter",function(){
      $("#top_mailing_hidden").stop().slideDown('slow');
    })
    .bind("mouseleave",function(){
      $("#top_mailing_hidden").stop().slideUp('slow');
    });
}

我将以下内容用于其他浏览器，但在Internet Explorer中无法正常工作。

$('#top_mailing').hoverIntent(
  function () {
    $("#top_mailing_hidden").stop().slideDown('slow');
  },
  function () {
    $("#top_mailing_hidden").stop().slideUp('slow');
  }
);

最佳答案

我想我找到了问题。

您要拨打$('#top_mailing').hoverIntent(...两次。一次出现在hoverintent_r5.js文件的底部，一次出现在custom.js文件中。显然IE不喜欢那样。摆脱一个或另一个，应该没问题。

最好将所有代码保存在自己的js文件中。否则很容易忘记。

编辑:避免stop()问题。

我更喜欢动画:

$('#top_mailing').hoverIntent(
  function () {
    $("#top_mailing_hidden").stop().animate({height:150},'slow');
  },
  function () {
    $("#top_mailing_hidden").stop().animate({height:0},'slow');
  }
);

这样，当您需要停止并更改方向时，它将始终知道该去哪里。 (在上面的示例中为0和150。)

请注意，这将要求top_mailing_hidden设置clip:auto; overflow:hidden。

由于您使用的是hoverIntent，因此可能不需要调用stop()，因为hoverIntent的目的是避免那些意外的鼠标悬停事件。

稍微偏离主题:

在实现过程中请牢记一件事。由于这是一种要填写的表格，因此用户在开始输入时可能会(甚至不考虑)将鼠标移开。那将导致表格消失。

考虑到这一点，您可能需要重新考虑执行mouseout事件。当用户提交表单时，您可以始终使用一个可选的“取消”或“关闭”按钮来使其滑动回去。

关于javascript - 用.hoverIntent替换MouseOver，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2240100/