Сделать <input /> появляться при переходе <div>

У меня такая установка:

.wrapper {
  height: 40px;
  width: 80px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
  width: 800px;
  -webkit-transition: width 0.4s ease-in-out;
  justify-content: left;
  padding-left: 35px;
}

.text-input {
  display: none;
}

.wrapper:hover .text-input {
  display: block;
}

<div>
  <div class=wrapper>
    <div class=element>
      <input class=text-input type = "text" name = "search" />
    </div>
  </div>
</div>

https://codepen.io/anon/pen/BOzJxL

Мне нужно, чтобы текстовый ввод появлялся рядом с hotpink div elemenet (он должен оставаться там, где он есть, когда появляется input). Мне нужно, чтобы он появлялся побитно - вроде как раскрывается пиксель за piyxel. Покидая div, я хочу, чтобы он снова был скрыт - в том же стиле, что и вошел.

Вам не хватает двух закрывающих тегов </div> в вашем div element и вашем div wrapper.

— 28.08.2018 13:42

@TimKlein Добавлены отсутствующие закрывающие теги.

— 28.08.2018 13:44

Элементы <div> не являются самозакрывающимися, поэтому у вас не может быть этого: <div class=element/>. Он должен иметь закрывающий тег (div являются элементами контейнера, что означает, что вы помещаете в них другие элементы HTML): <div class=element></div>.

— 28.08.2018 13:47

@TimKlein отредактировал это. Сожалею. React-режим;)

— 28.08.2018 13:49

попробуйте добавить поле: .text-input {display: none; margin-left: 10px}

— 28.08.2018 13:50

Примечание: тег <input> не использует и не нуждается в закрывающей косой черте и никогда не использовал.

— 28.08.2018 14:14

javascript html css

28.08.2018 13:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это сработает для вас.

.wrapper {
  height: 40px;
  width: 75px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  padding-left:30px;
  -webkit-transition: width 0.4s ease-in-out;
  box-sizing:border-box;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
  width: 100%;
}

.text-input {
  max-width: 0;
  float: left;
  padding: 0px;
  border: 0px transparent;
  -webkit-transition:max-width 0.6s ease-in-out;
  transition:max-width 0.6s ease-in-out;
}

.wrapper:hover .text-input {
  max-width: 50%;
  padding: 2px;
  border: 1px solid #d4d4d4;
}

<div class = "wrapper">
  <div class = "element"></div>
  <input class = "text-input" type = "text" name = "search" />
</div>

div с горячим розовым цветом исчезает: - /

— 28.08.2018 14:06

28.08.2018 13:53

Другие вопросы по теме

Якорь, скрытый переполнением, перемещается в поле зрения при фокусе

Проверка формы с помощью java-скрипта

Таблица с фиксированным заголовком создает проблемы

Передача выражения xpath в результат xpath

MediaRecoder не записывает аудио в формате HTML5

Есть ли способ поставить мою навигационную панель поверх всего?

Как передать данные html из боковой панели Google в переменную в коде gs

Неточность чисел с плавающей точкой в Vue.js во время рендеринга контента

Полноэкранное приложение для продолжения работы в фоновом режиме

Выберите тег без раскрывающихся опций

Сделать <input /> появляться при переходе <div>

Ответы 1

Другие вопросы по теме

Похожие вопросы