Keep div:hover open when changing nested select box
This is an IE-only problem. The Layout: .toolTip becomes visible when it’s parent div is hovered over. Inside of .toolTip is a select box. When the user opens the select box to make a selection, the parent element gets hidden. I`m using also position:absolute.
The solution
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!--[if IE]> <style type="text/javascript"> Â jQuery(function($){ Â Â $('.toolTip select').focus(function(){ Â Â Â Â $(this).parents('.toolTip').addClass('keepOpen'); Â Â }); Â Â $('.toolTip select').blur(function(){ Â Â Â Â $(this).parents('.toolTip').removeClass('keepOpen'); Â Â }); Â Â $("a.closeParentBox").click(function(){ Â Â Â Â $(this).parents('.toolTip').fadeOut(); Â Â Â Â return false; Â Â }); Â }); </script> <![endif]--> |
Leave a Reply
Want to join the discussion?Feel free to contribute!