在搜索欄中滑動嵌套的Div

Question

我需要建立一個搜索欄，其中包含搜索輸入，一個選項按鈕，然後是第三個按鈕，當徘徊擴展到左側時，將前兩個元素向前推。

我試圖用CSS來做到這一點，但不能讓其他元素很好地滑動，所以我猜這需要用jQuery來完成？

當用戶將鼠標懸停在箭頭上時，div會向左滑動以顯示「搜索」一詞以及20％灰色疊加層。

'選項'按鈕應向左滑動，同時搜索按鈕展開，但整個搜索包裝的寬度不應改變也不應移動。

在代碼而言，這是我在目前位置：

HTML：我試過

 <div class="search-box"> 
      <input name="" type="text" placeholder="search" class="input"><a href="#" class="option">options</a> 
      <div id="search-button"> 
       <div id="search-button-text">search &nbsp;</div> 
       <a href="#"><img src="/static/images/search-btn.jpg" alt=""></a> 
      </div> 
     </div> 

一些JS沒有運氣：

$(".search-button").hover(function() { 
     $('search-button-text').style.display = 'block-inline'; 
    }); 

的CSS：

.search-box { 
    width:582px; 
float:right; 
clear:both; 
} 

.search-box .input { 
float:left; 
/*min-width: 500px;*/ 
border:1px solid #231f20; 
height:25px !important; 
font:16px "JosefinSans Regular", Arial, Helvetica, sans-serif; 
margin:0px; 
} 

.search-box .option { 
    display: block-inline; 
float:left; 
    height:20px !important; 
    width: 50px; 
border:1px solid #231f20; 
    padding-top:7px; 
    text-align: center; 
border-left:none; 
border-right:none; 
color:#000; 
text-decoration:none; 
font-size:13px; 
} 

#search-button { 
    display:inline-block; 
} 

#search-button-text { 
    display: none; 
    visibility: hidden; 
} 

Answer 1

我已經做了，通過CSS3轉變特性的幻燈片效果，這是你在尋找爲http://jsfiddle.net/T7FqG/1/我已經改變了HTML一點，並增加了滑動CSS輸出

HTML

<div class="clearfix searchbox"> 


    <input type="text" /> 

    <a href="#" class="searchbutton"> 
     <span class="searchtext">Search</span> 
     <span class="arrow">&#8594;</span> 
    </a> 
    <a href="#" class="option">Options</a> 


</div> 

CSS

 *{padding:0; margin:0;} 
    .clearfix:after {clear: both;content: ' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;} 
    .clearfix {display: inline-block;} 
    * html .clearfix {height: 1%;} 
    .clearfix {display: block;} 
    .searchbox{width:500px;border:1px solid #000; font-family:Arial, Helvetica, sans-serif; font-size:13px;} 
    .searchbox input{height:20px; padding:5px;border:0px solid #000; width:360px; outline:0;} 
    .searchbox a{line-height:30px; color:#000; float:right; display:block; text-decoration:none; padding:0 5px;} 
    .searchbox a span{float:left; display:block;} 
    .searchbox a.option{border-right:1px solid #000;border-left:1px solid #000;} 
    .searchtext{width:41px;width:0; display:inline-block; overflow:hidden; -webkit-transition:300ms all;-moz-transition:300ms all;-o-transition:300ms all;transition:300ms all;} 
    .searchbutton:hover .searchtext{width:45px;} 
    .searchbutton:hover {background:#f2f2f2;}