Help?: IE8 issue with select - moving mouse to options closes select box

Discussion in 'Programming' started by morkus64, Dec 14, 2012.

  1. morkus64

    morkus64 Diamond Member

    Joined:
    Nov 7, 2004
    Messages:
    3,285
    Likes Received:
    0
  2. KB

    KB Diamond Member

    Joined:
    Nov 8, 1999
    Messages:
    4,543
    Likes Received:
    1
    Its happening in IE9. Once you leave the select box and hover over the dropdown items it hides again. Maybe try changing from a CSS hover/hide scheme to a jquery show/hide method.

    http://api.jquery.com/hover/

    $('#button_box').hover(function(){ $('#select_option').show(); }, function(){ $('#select_option').hide(); });
     
  3. GregGreen

    GregGreen Golden Member

    Joined:
    Dec 5, 2000
    Messages:
    1,663
    Likes Received:
    0
    I spent a little time playing with this and I don't have an exact solution for you. While playing around in IE8's dev tools, you can kind of see that IE just doesn't respect that your option tags are inside the div #button_box.

    Partially because of this and partially because the desired effect isn't great UX design, I did a little rewriting of your fiddle. http://jsfiddle.net/3qVv7/111/

    Using jQuery, I've bound an event handler that fires when you hover over the #button_box. This event handler will change #form_box's display to block, just like your CSS :hover selector did. Inside this event handler, I bound another event handler that fires when you change the value of your select dropdown (as opposed to on mouseleave, like :hover would do). This event handler will hide #form_box again.

    Also, I moved your onChange inline JS into the anonymous function that is called on the second event handler I created (it's commented out so as to not throw any errors). It's not a good practice to have inline JS. It's best to have all JS interactions in one place as it will be much more maintainable in the long run.

    If this jQuery solution isn't acceptable to you (and maybe even if it is), I think you need to go back and rethink what you're trying to do. Maybe in your real example there's a great purpose for it, but, in general, it's not very user-friendly to have content hidden for the sake of it being hidden. I'm also not sure how comfortable I am with using :hover (and CSS overall) for user interactions, but that's a discussion for another day.

    PS: I took the time to try using the .hover method KB suggested, but it has the same issue as using CSS :hover.
     
    #3 GregGreen, Dec 18, 2012
    Last edited: Dec 18, 2012
  4. baseter

    baseter Junior Member

    Joined:
    Jan 11, 2013
    Messages:
    7
    Likes Received:
    0
    Why would you still use IE ?