Geek Answers Handbook

Selection loses focus when moving from mouse

I am trying to make the hover effect as follows:

<div>Some Text</div>

should be replaced with <select> when hovering over the mouse. as soon as the mouse leaves this selection, it should display either the previously displayed value or the new selected value.

Unfortunately, mouseleave is called when you open the drop-down list to select some options, and I cannot make it work. Has anyone had this problem before and knows a 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>

jQuery:

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

Can someone tell me how I can make sure mouseleave is not called when someone opens a selection and hangs over the parameters?

BTW: it fires when the mouse button is pressed during selection

+4
source share
3 answers

I think that for this you need to use change and blur events:

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

thus, the selection will be hidden when the user clicks on this option or clicks outside the selection. I think this is also more practical.

+1
source

Have you tried to use the hover () event?

 $("#text").hover( function() { $(this.hide(); $("#selector").show(); }, function() { $(this).hide(); $("#text").show(); });
0
source

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

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>
0
source

More articles:


All Articles