IE8 breaking on hover of select box's options

Question

Okay, so I have the following code that works fine in all browsers except 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');}});  

Now, in IE if you open the select box and move your mouse over one of the options the box closes. What's causing it is the IE apparently doesn't count the dropdown box of options as part of the select element so it triggers the mouseleave event.

Does anyone know a fix around this?

Answer 1

IE in particular has a very bizarre implementation of <select> , since IE6 (possibly earlier) it was pulled in from winforms...which is also the reason it sits on top of anything but an <iframe> in older versions.

Unfortunately, events on or involving <option> elements are unreliable at best (like you're seeing)...and can't be trusted in IE. You could disable the behavior in IE, but that's about the only "fix" there is.

The all-out alternative is to replace the <select> completely, there are a few jQuery plugins out there that do this, check out this question for options around that .