All geek questions in one place

Finding Input Slide on CSS3 Hover Button?

I managed to get the input field to slip out when I hover over the text “Search” in the input field. BUT, I would prefer the slide animation to be enabled using the "GO" button (send too).

Fiddle

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

+4
source share
3 answers

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

What I did was change the .search input:hover selector to .search:hover input .

This means that if you hover over any part of the .search container, the input must be disabled.

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

+7
source

Personally, I would use jQuery hover as follows:

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

You can only do this in css by setting the opacity to 0 for an inactive state:

 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0;

Working demo here: http://jsfiddle.net/7yAv7/7/

EDIT: when only hovering the go button: http://jsfiddle.net/7yAv7/8/

0
source

Source: https://habr.com/ru/post/1446380/

More articles:


All Articles