detect mouseover of select option in all browsers

Question

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?

If i'm not mistaken you can fool other browsers to know when any part of the select & options is hovered by wrapping it with a div and doing mouseover there, but I don't think you can do this without creating your own fake select-like dropdown. — Mark Pieszak - Trilon.io, Sep 05 '12 at 15:19
Check out this post: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript It has a lot of details about the pitfalls of ` — Zachary Kniebel, Sep 05 '12 at 17:25

score 2 · Answer 1 · answered Sep 05 '12 at 16:11

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/

score 0 · Accepted Answer · answered Jan 22 '15 at 16:03

@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/

detect mouseover of select option in all browsers

2 Answers2

Linked