javascript - 如何让 IE9 尊重 jquery hover()

Question

我有一个悬停动画的 div(我正在使用 jquery 的 .hover() 方法)。 div 包含一个带有选择的表单。打开选择并悬停在选项上会使 IE9 将其解释为“取消悬停”父 div，导致第二个悬停动画触发。你可以在这里看到它:

http://www.oliveboutiquehotelpr.com/temp/

关于如何避免这种情况的任何想法？它在所有其他主要浏览器中工作正常。

抱歉，这是一个 jsFiddle:http://jsfiddle.net/jun6g/1/

Answer 1

通过添加一个反射(reflect)选择焦点的变量并检查它是否每次要设置动画，我已经解决了您的问题。此处的 Javascript 代码 ( JSFiddle )
更新
我已经解决了在您打开并关闭它之后选择再次出现问题的问题，方法是在框关闭时使选择出现毛边。代码和链接已更新。

  var selectfocused = false;
  $('#block-block-5').mouseover(function () {
      selectfocused = false;
  });
  $('#block-block-5 select').focus(function () {
      selectfocused = true;
  }).blur(function () {
      selectfocused = false;
  });
  $('#block-block-5').hover(function () {
      if (selectfocused == false) {
          console.log(selectfocused);
          $(this).stop().animate({
              top: 0,
              opacity: 1
          });
      }
  }, function () {
      if (selectfocused == false) {
          $('#block-block-5 select').blur();
          $(this).stop().animate({
              top: -294,
              opacity: 0.6
          });
      }
  });

编码愉快!