检测所有浏览器中选择选项的鼠标hover
我正试图让一个方框弹出一个下拉菜单的侧面，以与当前hover的选项内联。 这不容易解释，所以这是一个工作示例（仅适用于Firefox）。 http://jsfiddle.net/WJaVz/21/
我已经在Chrome和IE中尝试了它，但似乎都没有识别选项的mouseenter事件，所以预览框永远不会出现。 我试图将事件更改为鼠标hover并专注于他们喜欢它们但它仍然无法在IE和Chrome中工作。 （还没有经过测试过的歌剧或safari。）
一个想法是可能使下拉列表成为无序列表并使其看起来像下拉列表，我想我可以检测到li具有mouseenter事件的时间。
有没有人知道这个的解决方案，所以它适用于大多数当前的浏览器，如果不是所有的浏览器没有重建大部分？
@ SubstanceD的解决方案是我发现的最好的解决方案，但它有一些可访问性问题，所以我重新使用它来使用单选按钮的字段集。
HTML：
red
CSS：
body{ margin: 0; padding: 50px; } input { opacity:0; } label { display:block; height:20px; } #colourlist{ position: absolute; border: 1px solid #B5B0AC; width: 200px; height: 21px; background: url('http://sofzh.miximages.com/jquery/') 180px 0 no-repeat; } label:hover{ background-color: #3399FF; } #colours{ display: none; position: relative; top: 22px; left: 0; width: 200px; position: relative; border: 1px solid #B5B0AC; overflow-y: scroll; height:60px; } #preview{ display: none; position: relative; background-color: #fff; border: 1px solid #ccc; padding: 10px; width: 250px; height: 30px; }
JS：
$("#colours label").on('mouseenter', function(){ var O = $(this).offset(); var CO = $("#colours").offset(); $("#preview").css("top", O.top-150).show(); $("#preview").css("left", CO.left+160); var text = $(this).text(); $("#preview").css("background-color", text); }); $("#colours input").on('click', function(){ var text = $(this).attr("id"); $("#colourlist").text(text); $("#colours").hide(); $("#preview").hide(); }); $("#colourlist").on('click', function(e){ e.stopPropagation(); $("#colours").show(); }); $("body").on('click',function(e){ $("#colours").hide(); });
这是小提琴： http ： //jsfiddle.net/MikeGodin/CJbeF/109/
谢谢mcpDESIGNS，我确实尝试了一些其他的东西，但无济于事。 我最终将它重建为无序列表。 我把列表看起来像一个下拉菜单，然后我可以很容易地检测到用户将鼠标hover在无序列表中的时候….这适用于所有浏览器= WIN 8D
这是代码： http ： //jsfiddle.net/CJbeF/22/