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.

Solution 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.

Solution 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');
 });​

Comments

[KXXT]

Thank You, I'll use this if no other answers are posted.

[KXXT]

I'd like for the input field to slide out only when the "GO" button is hovered...

[KXXT]

I tried this method but now the input field does not slide to the left. Instead it slides to the right. New fiddle// jsfiddle.net/SBSAL

[KXXT]

And for some reason on the actual site the button doesn't trigger the animation. I have the latest jquery set in the header too. What might be the problem here?

[vivek salve]

make sure that u have added the proper jquery plugin file

[KXXT]

I have this for jquery // <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min‌​.js" type="text/javascript"></script>

[KXXT]

Is there anyway to make the animation stop where the search criteria stops? say someone searched for "Watermelons" can the animation stop at the end of the word so that the text they searched for is still visible when they press enter or click the go button? Hope that makes sense...

[KXXT]

might there also be a way to make the input field slide out on click? @clarkpan

[Clark Pan]

If you wish to do the other two things you'd need to use javascript.