Question

(I’ve posted a similar question before but now it is more targeted..)

I am trying to create a special hover effect with jQuery. I have a submit button – when a user moves his mouse over it I want a textarea element to open below the button. The user can then move his mouse into the textarea and type something… When he finishes he can move his mouse back to the submit button and submit the form. If the user moves his mouse outside of the button+textarea then the textarea should disappear.

The effect is basically identical to a navigation menu when a user places his mouse over a menu item, a list of related items opens below the item and the user can then choose from them. If he leaves the area, the related items list closes.

You can find a test I’ve made with no success at jsbin (the textarea disappears whenever the user tries to reach it)

HTML

<div id="send-container">
    <input type="button" value="Button">
    <div id="text-container">
      <textarea></textarea>
    </div>
  </div>

JS (jQuery)

$("#send-container").live("mouseenter",
            function() {
                $("#text-container" , $(this)).show();
            });
      $("#send-container").live("mouseleave",
            function() {
              $("#text-container" , $(this)).hide();
            }
       );

Answer 1

You need to set a height on the container, at the moment it isn’t high enough to include the box.

Once you’ve done that, you seem to still have a problem with keeping it there, you might want to add something to ensure that on focus it’s still there.