在搜索栏中滑动嵌套的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;}