jquery - 搜索输入在按钮悬停CSS3上滑出？

Question

将鼠标悬停在框中的“搜索”文本上时，我设法让该input字段滑出。input但我宁愿在悬停时使用“GO”按钮滑出动画（也提交）。

小提琴

我想更改为.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 为非活动状态在 css 中执行此操作：

-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/