Сдвиньте поле ввода

Question

Когда моя кнопка становится парящей, я хочу открыть новое поле ввода, чтобы оно выглядело так, как будто оно появилось из-за кнопки.

Во-первых, я пытался сделать это только с помощью CSS. Поэтому я попытался работать с окруженной высотой формы, используя overflow: hidden. Но когда я это делаю, кнопка исчезает вместо поля ввода. Есть ли способ изменить это? Как конкретный браузер? Так много для этого.

Теперь я попытался работать с jQuery, но я не привык это делать. Я действительно надеюсь, что у вас есть идея заставить его работать правильно.

Значение, которое должно быть изменено в запас: 0 auto -3px к 0 auto -31px

Вот мой example

Answer 1

Это может быть сделано без JavaScript при создании окружающего DIV.

Я создал div с классом «некоторые» (в отсутствии творчества). Затем, когда вы его наводите, поле ввода становится видимым.

CSS:

.some { 
    display: inline-block; 
} 

.some:hover .l-input { 
    margin: 0 auto -3px; 
} 

.l-button { 
    text-transform: uppercase; 
margin: 0 auto; 
display: block; 
width: 7em; 
position: relative; 
    cursor: pointer; 
} 

.l-input { 
margin: 0 auto -31px; 
text-align: center; 
text-transform: uppercase; 
width: 5.9em; 
position: relative; 
height: 1.25em; 
    display: block; 
} 

Fiddle: http://jsfiddle.net/c3Veu/

редактировать:

Проверьте это: http://jsfiddle.net/sbNym/

Используется абсолютное положение вместо этого, так что поле ввода выскакивает из-за спины. (:

Answer 2

попробовать этот HTML:

<div id="container"> 
     <input type="text" name="bewerbung" class="l-input"> 
     <button type="button" value="BSend" class="l-button">code</button> 
    </div> 

и это Script:

 $(document).ready(function() { 

      $('.l-button').mouseover(function() { 
       $('.l-input').animate({ bottom: '40px' }); 
      }); 
      $('.l-input').mouseleave(function() { 
       $('.l-input').animate({ bottom: '6px' }); 
      }); 
     }); 

и это CSS:

 body { 
      padding: 5em; 
     } 

     /*NEW*/ 
     #container { 
      position: relative; 
      width: 90px; 
     } 
     /*NEW*/ 

     input { 
      background: transparent; 
      border: 1px solid rgba(155,86,77,0.2); 
      border-width: 0 0 1px; 
      -webkit-border-radius: 3px; 
      -moz-border-radius: 3px; 
      -o-border-radius: 3px; 
      border-radius: 3px; 
      padding: 5px; 
      background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(255,255,255,0.1))); 
      background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); 
      background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); 
      background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); 
      background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a000000', endColorstr='#1affffff',GradientType=0); 
      -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset, -1px -1px 1px rgba(255,255,255,0.2) inset, -1px 0px 1px rgba(0, 0, 0, 0.2) inset, 0 3px 0 rgba(155,86,77,0.8); 
      -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset, -1px -1px 1px rgba(255,255,255,0.2) inset, -1px 0px 1px rgba(0, 0, 0, 0.2) inset, 0 3px 0 rgba(155,86,77,0.8); 
      -ms-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset, -1px -1px 1px rgba(255,255,255,0.2) inset, -1px 0px 1px rgba(0, 0, 0, 0.2) inset, 0 3px 0 rgba(155,86,77,0.8); 
      -o-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset, -1px -1px 1px rgba(255,255,255,0.2) inset, -1px 0px 1px rgba(0, 0, 0, 0.2) inset, 0 3px 0 rgba(155,86,77,0.8); 
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset, -1px -1px 1px rgba(255,255,255,0.2) inset, -1px 0px 1px rgba(0, 0, 0, 0.2) inset, 0 3px 0 rgba(155,86,77,0.8); 
      font-family: Raleway; 
      -webkit-appearance: none; 
      -moz-appearance: none; 
      appearance: none; 
      outline: none; 
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
      -webkit-tap-highlight-color: transparent; 
      -webkit-tap-highlight: none; 
      -webkit-focus-ring-color: rgba(0, 0, 0, 0); 
      -webkit-focus-ring-color: transparent; 
      -webkit-focus-ring-color: none; 
     } 

     .l-input:active, .l-input:focus { 
      -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset, -1px -1px 1px rgba(255,255,255,0.2) inset, -1px 0px 1px rgba(0, 0, 0, 0.2) inset, 0 0 1px 4px rgba(105,157,182,0.3), 0 4px 0 rgba(155,86,77,0.8); 
      -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset, -1px -1px 1px rgba(255,255,255,0.2) inset, -1px 0px 1px rgba(0, 0, 0, 0.2) inset, 0 0 1px 4px rgba(105,157,182,0.3), 0 4px 0 rgba(155,86,77,0.8); 
      -ms-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset, -1px -1px 1px rgba(255,255,255,0.2) inset, -1px 0px 1px rgba(0, 0, 0, 0.2) inset, 0 0 1px 4px rgba(105,157,182,0.3), 0 4px 0 rgba(155,86,77,0.8); 
      -o-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset, -1px -1px 1px rgba(255,255,255,0.2) inset, -1px 0px 1px rgba(0, 0, 0, 0.2) inset, 0 0 1px 4px rgba(105,157,182,0.3), 0 4px 0 rgba(155,86,77,0.8); 
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset, -1px -1px 1px rgba(255,255,255,0.2) inset, -1px 0px 1px rgba(0, 0, 0, 0.2) inset, 0 0 1px 4px rgba(105,157,182,0.3), 0 4px 0 rgba(155,86,77,0.8); 
     } 

     button { 
      display: inline-block; 
      color: #FFF; 
      background: #699DB6; 
      padding: 7px 20px; 
      border-radius: 5px; 
      border: 1px solid rgba(0,0,0,0.3); 
      border-bottom-width: 3px; 
     } 

     .l-button { 
      text-transform: uppercase; 
      margin: 0 auto; 
      display: block; 
      width: 7em; 
      position: relative; 
      cursor: pointer; 
     } 

     .l-input { 
      margin: 0 auto -3px; 
      text-align: center; 
      text-transform: uppercase; 
      width: 5.9em; 
      position: absolute;   /*NEW*/ 
      bottom: 6px;   /*NEW*/ 
      height: 1.25em; 
      display: block; 
     }