4

I am trying to do a hover effect as follows:

<div>Some Text</div>

should be substituted by a <select> upon mouseover. as soon as the mouse leaves that select it should display either the value previously displayed or the new selected value.

Unfortunately the mouseleave is called when you open the dropdown to select some options and I cannot get it to work. Has anyone had this problem before and knows the solution?

<div id="text">Some Text</div>
<select id="selector" style="display: none">
<option value="1" selected="selected">Some Text</option>
<option value="2">Some More</option>
<option value="3">Some Other</option>
</select>

the jQuery:

$("#text").mouseover(function()
{
    $(this).hide();
    $("#selector").show();
});

$("#selector").mouseleave(function()
{
    $(this).hide();
    $("#text").show();
});

Can anyone let me know how I can make sure that the mouseleave isn't called when somebody is opening the select and hovers over the options?

BTW: It does work when the mousebutton is being pressed during the selection

  • Here http://stackoverflow.com/questions/11781518/mouseenter-mouseleave-and-a-select is the answer. I modified a little to make it working for me.. – Sami May 18 '14 at 20:52

3 Answers3

1

I think that you should use the change and blur events to do this:

var hidesel=function()
{
    $(this).hide();
    $("#text").show();
}
$("#selector").change(hidesel).blur(hidesel);

in this way the select will be hidden when the user clicks on an option or clicks outside the select. I think it's also more practice.

mck89
  • 18,918
  • 16
  • 89
  • 106
  • the problem with this is, that the select does not disappear on mouseout/mouseleave. to in order to make the select lose the focus you need to actually click somewhere else... :( –  Sep 04 '09 at 16:36
  • @Frank: that is mck89's point (I believe): it is detrimental to the user experience to use `mouseleave` over `blur` as the "hide trigger". Forcing the user to have to perform intricate mouse gestures to accomplish their goal is detrimental. See http://www.joelonsoftware.com/uibook/chapters/fog0000000063.html (**Users can't control the mouse very well**). A click is much less prone to "accidental" gestures than a mousemove. Plus, if you go with `blur` you'd then be able to customize the UI to work with the keyboard for users so inclined. – Crescent Fresh Sep 04 '09 at 16:45
  • sorry, i missed the sentence below the code example... still, not what i'm looking for unfortunately –  Sep 04 '09 at 16:49
  • @crescentfresh: with only the change event the select won't hide if the user selects the options that's already selected, so i think he should use the blur event too. Anyway another solution is apply the change event to the select and then the click event on the selected option. In this way it should work without the blur event. – mck89 Sep 04 '09 at 17:19
0

Have you tried using the hover() event?

$("#text").hover(
function() {
    $(this.hide();
    $("#selector").show();
},
function() {
    $(this).hide();
    $("#text").show();
});
Jagd
  • 7,169
  • 22
  • 74
  • 107
0

Wrap it in a wrapper <div> and set the event handlers on that

Working Demo

jQuery

$("#wrapper").mouseover(function()
{
    $("#text").hide();
    $("#selector").show();
});

$("#wrapper").mouseleave(function()
{
    $("#selector").hide();
    $("#text").show();
});

$("#selector").change(function() {
    var value = $(this).val();
    $("#text").text($("option[value='"+value+"']", this).text());

});

HTML

<div id="wrapper">

    <div id="text">Some Text</div>
    <select id="selector" style="display: none">

        <option value="1" selected="selected">Some Text</option>
        <option value="2">Some More</option>
        <option value="3">Some Other</option>

    </select>

</div>
Russ Cam
  • 124,184
  • 33
  • 204
  • 266