检测所有浏览器中的选择选项的鼠标悬停 [英] detect mouseover of select option in all browsers

问题描述

我正在尝试一个方框，弹出一个下拉菜单的一面，使其与当前悬停的选项一致。这不容易解释，所以这里是一个工作示例（仅在Firefox中使用）。 http://jsfiddle.net/WJaVz/21/

I'm trying to get a box to pop out the side of a dropdown menu to be inline with the option currently hovered over. This is not easy to explain so here is a working example (Works in Firefox only). http://jsfiddle.net/WJaVz/21/

我在Chrome和IE中尝试过，但是似乎并没有识别该选项的mouseenter事件，因此预览框从不出现。我试图将事件改变为鼠标悬停，并专注于他们喜欢他们，但它仍然不能在IE和铬。 （未经测试的歌剧或野生动物园。）

Ive tried it in Chrome and IE but neither seem to recognise the mouseenter event of the option so the preview box never appears. Ive tried to change the event to mouseover and focus in case they preferred them but it still doesn't work in IE and chrome. (not tested opera or safari yet.)

一个想法是将下拉列表设为无序列表，使其看起来像下拉菜单，我想我可以检测到有没有鼠标器事件。

One idea is to maybe make the dropdown an unordered list and make it look like a dropdown and I guess I can detect when the li has the mouseenter event.

有没有人知道一个解决方案，所以它可以在大多数当前的浏览器中运行，如果不是全部都没有重建大部分？ p>

Does anyone know a solution to this so it works in most of the current browsers if not all of them without rebuilding most of it?

推荐答案

@ SubstanceD的解决方案是我发现的最好的解决方案，但它有一些可访问性问题，所以我重新使用它来使用单选按钮的字段集。

@SubstanceD's solution is the best I've found, but it had some accessibility issues, so I re-worked it to use a fieldset of radio buttons.

html：

<div id="colourlist">red</div>
<fieldset id="colours">
  <label for="red">red<input type="radio" name="foo" id="red"/></label>
  <label for="blue">blue <input type="radio" name="foo" id="blue"/> </label>
  <label for="green">green<input type="radio" name="foo" id="green"/></label>   
  <label for="orange">orange<input type="radio" name="foo" id="orange"/></label>       
</fieldset>
<div id="preview"></div>

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://www.thermaxindia.com/images/dropdown_arrow.JPG') 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/

这篇关于检测所有浏览器中的选择选项的鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！