jquery - ボタンホバーCSS3で入力スライドアウトを検索しますか?

Question

ボックスinput内の「検索」テキストにカーソルを合わせると、フィールドがスライドアウトするようになりました。inputしかし、「GO」ボタンを使用してスライドアウトアニメーションをホバーしたいです（送信も）。

フィドル

検索ボタンがホバーされるまでフィールドが非表示になるように変更.search input {width:80px;}したかったのですが、ボタンだけがこのアニメーションをトリガーする方法がわかりません。30pxinput

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/

編集：移動ボタンにカーソルを合わせるだけの場合：http：//jsfiddle.net/7yAv7/8/