2012-06-24 18 views
1

我有一个div悬停动画(我使用jquery的.hover()方法)。 div包含一个带有select的表单。打开选项并悬停在选项上会使IE9将其解释为具有“未占用”父div,导致第二个悬停动画触发。你可以在这里看到:如何使IE9尊重jQuery的悬停()

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

如何避免任何想法?它可以在所有其他主流浏览器中正常工作。

比较遗憾的是,这里有一个的jsfiddle:http://jsfiddle.net/jun6g/1/

+0

请包括您的代码。我们不应该搜索您的网站来查找您所指的内容。一个[jsfiddle](http://jsfiddle.net/)也会非常有帮助。 –

+5

当我读到你的问题后,我真的很想告诉你“告诉它的父母” – vol7ron

+0

,这样你就知道了:当我点击第三个下拉列表(夜晚数)时,选项列表显示的应该是500px以上。 Chrome 19 – Thomas

回答

4

通过添加一个反映选择焦点的变量并检查每次它想要动画时,我已经解决了您的问题。此处的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 
      }); 
     } 
    }); 

快乐编码!

+0

嗨,非常感谢。我注意到,如果我选择一个选项,当我尝试更改我的选项时,问题会返回。有什么想法吗? – user1477567

+0

没有问题的帮助。让我看看我能对你指出的问题做些什么。 –

+0

我已修复您已注意到的问题。感谢您指出! –

0

没有此页面上选择。无论如何,没有选择元素的悬停。