detect mouseover of select option in all browsers

问题

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/

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.

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?

回答1:

@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();
});

Here's the fiddle: http://jsfiddle.net/MikeGodin/CJbeF/109/

回答2:

Thanks mcpDESIGNS, I did try a few more things but to no avail. I've ended up rebuilding it as an unordered list. Ive styled the list to look like a dropdown menu then I can easily detect when the user mouseovers the li in the unordered list....which works in all browsers = WIN 8D

Here's the code: http://jsfiddle.net/CJbeF/22/

来源：https://stackoverflow.com/questions/12284510/detect-mouseover-of-select-option-in-all-browsers