Search Input slide out on button hover CSS3?

css, hover, input, jquery

Solution

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.

Problem

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.

Original source