Search Input slide out on button hover CSS3?

Question

I managed to get the input field to slide out when hovering over the "Search" text within the input box. BUT I'd rather have the slide out animation on hover with the "GO" button (submit as well).

Fiddle

I wanted to change the .search input {width:80px;} to 30px so that the input field is hidden until the search button is hovered, but I am not sure how to make only the button trigger this animation.

Answer 1

Try this mate: http://jsfiddle.net/7yAv7/10/

What i did was change the .search input:hover selector into .search:hover input.

This means if you hover over any part of the .search container, the input should animation out.

Not 100% what you wanted but hopefully it helps as a starting point.

Answer 2

Personally I would use jQuery's hover like so:

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