Question

好的，所以我有以下代码在除IE之外的所有浏览器中都能正常运行。

$('input[title!=], select[title!=]').mouseenter(function(){
    if ($(this).data('focused')!='y') {
        $(this).data('t', this.title).data('focused', 'y');
        this.title = '';
        var pos = $(this).position();
        $('body').append('<div id="toolTip" class="round-5 shadow-heavy"><img class="arrow" src="/images/bg/toolTip.png" alt="" />'+($(this).data('t'))+'</div>');
        $('#toolTip').css('top',(pos.top+($(this).height()/2)-($('#toolTip').innerHeight()/2))+'px').css('left',(pos.left+($(this).innerWidth())+20)+'px'); 
    }
}).mouseleave(function(){
    if ($(this).data('focused')!='n') {
        $(this).data('focused', 'n');
        this.title = $(this).data('t');
        $('#toolTip').remove();
    }
}).focus(function(){if($(this).data('focused')!='y'){$(this).trigger('mouseenter');}}).blur(function(){if($(this).data('focused')!='n'){$(this).trigger('mouseleave');}});

现在，在IE中，如果您打开选择框并将鼠标移到其中一个选项上，则该框将关闭。导致它的原因是IE显然没有将选项的下拉框计为select元素的一部分，因此它会触发mouseleave事件。

有没有人知道解决这个问题？

Answer 1

IE特别是非常奇怪的<select>实现，因为IE6（可能更早）它是从winforms中提取的......这也是它位于顶部的原因除旧版本<iframe>之外的所有内容。

不幸的是，<option>元素上或涉及<select>个元素的事件充其量是不可靠的（就像你看到的那样）......并且在IE中无法信任。您可以在IE中禁用该行为，但这是唯一的“修复”。

全面替代方案是完全替换{{1}}，有一些jQuery插件可以执行此操作，check out this question for options around that。

IE8打破了选择框选项的悬停

1 个答案: