onHover effect with textarea

Question

Я пытаюсь создать эффект зависания, поэтому, когда пользователь нажимает кнопку мыши над кнопкой, текстовая область будет отображаться под кнопкой, где пользователь может вставить текст перед отправкой формы. Если пользователь покидает текстовое поле после того, как оно было открыто, я хотел бы, чтобы оно снова закрывалось ... Проблема с кодом, который я использовал ниже, заключается в том, что после того, как пользователь покинет область кнопки (чтобы вставить текст в textarea) текстовое поле исчезает. Помощь будет оценена!

Я использовал следующий код (Вы можете найти следующий пример также в jsbin):

CSS

#send-container { 
    position:relative; 
} 
#text-container { 
    display:none; 
    background-color:#FEF9F4; 
    position: absolute; 
    z-index: 1000; 
    top:28px; 
    left:0; 
    padding:2px; 
} 

textarea { 
    width: 150px; 
    height: 50px; 
    resize: none; 
    border: 3px solid #cccccc; 
    padding: 5px; 
    font-family: Tahoma, sans-serif; 
} 

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(); 
      } 
     ); 

Спасибо!

Joel

Answer 1

Для одного экземпляра можно увеличить высоту # посыла-контейнера.

$("#send-container").live("mouseenter", 
     function() { 
      $(this).css('height', 200); // or whatever it will work with your design 
      $("#text-container" , $(this)).show(); 
     }); 
    $("#send-container").live("mouseleave", 
     function() { 
      $(this).css('height', 100); // revert to original height 
      $("#text-container" , $(this)).hide(); 
     } 
    ); 

Это увеличивает площадь вашего слушателя, будет слушать тоже :)

Answer 2

Во-первых, рассмотреть вопрос о целесообразности или нет это лучший подход к тому, что вы пытаетесь достичь. Похоже, что это создаст ужасный пользовательский интерфейс. Во-первых, «кнопка» также представляет форму? Если это так, текстовое поле исчезнет, ​​когда оно будет нажато, так как пользователь оставил бы его.

Вот пример того, что вы просили, но это невозможно представить в виде: http://jsbin.com/otuvu4/edit