TEXTAREA

Question

とonHover効果私はホバー効果を作成しようとしていますので、ユーザーがボタンの上に彼のマウスを移動したときに、テキストエリアは、ユーザーがフォームを送信する前にテキストを挿入することができ、ボタンの下に表示されます。それが開かれた後、ユーザーがテキストエリアを離れた場合、私は私が以下で使用したコードに問題がある....それが再び閉じられたいというユーザーは、テキストを挿入するために（ボタン領域を離れるとテキストエリア）が消えます。助けていただければ幸いです！

私は、次のコードを使用している（また、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

1つのインスタンスでは、＃send-containerの高さを増やすことができます。

$("#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