將鼠標懸停在文本上滑動新文本框

Question

我希望當鼠標懸停在特定文本上時，新文本框應該從包含某些複選框的文本框中滑出。

Answer 1

<span onMouseEnter="showDiv()" onMouseLeave="HideDiv()">My text</span> 
<input type="text" id="container" style="display:none"><input type="checkbox"/></div> 

<script> 
    function showDiv() 
    { 
     $("#container").show(); 
    } 

    function hideDiv() 
    { 
     $("#container").hide(); 
    } 
</script> 

Answer 2

HTML：

<div onmouseover="document.getElementById('div1').style.display = 'block';" onmouseout="document.getElementById('div1').style.display = 'none';">My text</div> 
<div id="div1"><input type="checkbox" name="mycheckbox"/>Mycheckbox</div> 

CSS：

#div1 
    { display:none; } 

請參閱小提琴：http://jsfiddle.net/Kritika/mrEC5/

請在下面找到更新的代碼。

HTML

<ul class="link"> 
    <li> 
     <label id="1" class="check"><input type="checkbox" /> Checkbox One</label> 

     <ul id="checkbox-container1" class="hidden"> 
      <li> 
      <label><input type="checkbox" /> Checkbox One</label> 
      </li> 
      <li> 
      <label><input type="checkbox" /> Checkbox Two</label> 
      </li> 
      <li> 
      <label><input type="checkbox" /> Checkbox Three</label> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <label id="2" class="check"><input type="checkbox" /> Checkbox One</label> 

     <ul id="checkbox-container2" class="hidden"> 
      <li> 
      <label><input type="checkbox" /> Checkbox </label> 
      </li> 
      <li> 
      <label><input type="checkbox" /> Checkbox </label> 
      </li> 
      <li> 
      <label><input type="checkbox" /> Checkbox </label> 
      </li> 
     </ul> 
    </li> 
</ul> 

CSS：

.hidden{ 
    display:none; 
} 
ul li{list-style:none;} 

腳本：

$(function(){ 
    // shows checkboxes on mouseover and hides them on mouseout 
    $("ul.link li .check").hover(  
     function(e) { 
      var id1=this.id;    
      $("#"+id1).closest('ul').find('#checkbox-container'+id1).slideDown();   
     }, function(e) { 
      var id2=this.id;   
      $(this).closest('ul').find('#checkbox-container'+id2).slideUp();   
     } 
    ); 
}); 

找到工作小提琴：http://jsfiddle.net/Kritika/UQE2F/7/

Answer 3

下面是一個使用HTML，CSS和J avascript分離和動畫，同時顯示和隱藏。

檢查以下小提琴

http://jsfiddle.net/UQE2F/1/

Hope this helps.