将鼠标悬停在文本上滑动新文本框

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.