按钮悬停CSS3上的搜索输入滑出？

Question

当鼠标悬停在input框内的“搜索”文字上时，我设法让input字段滑出。但我宁愿使用“GO”按钮悬停幻灯片动画（也可以提交）。

Fiddle

我想将.search input {width:80px;}更改为30px，以便隐藏input字段，直到搜索按钮悬停，但我不知道如何只使按钮触发此动画。

Answer 1

试试这个伙伴：http://jsfiddle.net/7yAv7/10/

我所做的是将.search input:hover选择器更改为.search:hover input。

这意味着如果将鼠标悬停在.search容器的任何部分上，输入应该动画出来。

不是100％你想要的，但希望它有助于作为一个起点。

Answer 2

我个人会像这样使用jQuery的悬停：

 $('.srch_btn').hover(function(){
     $('.search input').css('width', '200px');
 },
 function(){
      $('.search input').css('width', '30px');
 });​

Answer 3

只能通过将不透明度设置为0来执行非活动状态：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
-webkit-opacity: 0;
opacity: 0;

此处的演示演示：http://jsfiddle.net/7yAv7/7/

编辑：当只悬停go按钮时：http://jsfiddle.net/7yAv7/8/