Display a control on mouse hover and persist it.

Question

0.00/5 (No votes)

See more:

There are 2 items side-by-side (A button (say Button A) and a popup that contains another button). Initially the popup is NOT open. The requirement is that when the mouse hovers over Button A , the popup should open and the user should be able to click the button inside the popup. Then when the mouse hover moves out of the combined area of Button A and the popup , the popup should get closed.

While it is simple to open the popup on hover of Button A , the complexity lies in preventing the popup from closing as soon as the mouse hover moves out of Button A. The other complexity is to close the popup when the mouse hover moves out of the combined area of Button A and the popup.

Any ideas on this ? Thanks for any help.

Posted 3-Sep-13 4:13am

Hellraiser123

Add a Solution

Comments

Pheonyx 3-Sep-13 10:23am

I don't know if this would be possible, but use a collapsible area in a grid that surrounds the button and the pop-up. start with the area in its collapsed state so that only the first button is visibile, then rather then bubble the hover event on the button to the pannel, this then causes the second part of the panel to expand.... exposing button 2....

concept being that when you are no longer hovering over the panel (not the button) it then collapses rather than relying on the button hover event.

Niral Soni 3-Sep-13 10:34am

Remove "mouseout" event from Button A and put it on Popup

jkirkerx 3-Sep-13 18:17pm

In my opinion, that's a bad design.

Click the button,
show the popup,
Click to close the popup.

If you look around like at Google UI designs, they seem to always have an X in the upper right corner to close things.

Like on mobile devices, I don't think there is a hover event, you have to click or touch the button. Hover is fine for changing the pointer

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2013-09-03T08:43:00

The most common way to do this is to create the control in advance and give it the 'hidden' attribute. Then, capturing the mouse event of your choice, use the DOM to change it to visible, and, if desired, invisible when no longer hovering. You problem can be solved, then, by not setting the hidden attribute from the same control as the visible attribute: use the target control to hide itself.

An alternate means would use AJAX to create the control in a specific location, but personally, I'd only do that as an exercise - not a direction I'd head in for real.

Display a control on mouse hover and persist it.

1 solution

Solution 1

Add your solution here

Preview 0

Display a control on mouse hover and persist it.

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us