ontover效果與textarea

我想創建一個懸停效果，所以當用戶將他的鼠標移動到一個按鈕上時，textarea將顯示在按鈕下方，用戶可以在提交表單之前插入文本。如果用戶在打開textarea後離開，我希望它再次關閉....下面我使用的代碼的問題是，一旦用戶離開按鈕區域（爲了插入文本textarea）textarea消失。幫助將不勝感激！ontover效果與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

來源

2011-02-10 Joel

對於一個實例，您可以增加＃發送容器的高度。

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

這增加了該地區的聽衆，會聽太:)

來源

2011-02-10 16:47:35 risico

首先，考慮是否這是你想達到什麼樣的最佳方式。看起來這將會帶來可怕的用戶體驗。首先，'按鈕'是否也提交表單？如果是這樣，textarea會在點擊時消失，因爲用戶會離開它。

這裏是你問什麼的例子，但它不可能提交表單： http://jsbin.com/otuvu4/edit

來源

2011-02-10 16:47:57 amustill

ontover效果與textarea

回答

相關問題