Блог

Главная - Вопросы по программированию - При наведении курсора элемент расширяется и накрывает другой

При наведении курсора элемент расширяется и накрывает другой

#javascript #html #css

Вопрос:

поэтому я хочу сделать так, чтобы при наведении курсора ввода ввод расширялся на всю длину div, охватывая весь промежуток — я пробовал разные варианты, но они просто не работают.

 * {
  font-family: monospace;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  width: 330px;
  height: 30px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

#input1 {
  margin-left: 15px;
  width: 70px;
  transition: .8s;
}

#input1:hover {
  width: 300px;
  margin: 0px 15px;
} 
 <div class="container">
  <span class="span1">what do you have to do?</span>
  <input id="input1" type="text" placeholder="">
</div>

я был бы так благодарен, если бы вы просто попытались помочь

Комментарии:

1. Что вы подразумеваете под «ввод распространяется на всю длину div, охватывая весь промежуток» — Вы имеете в виду, что промежуток исчезает?

Ответ №1:

Если я правильно понимаю вашу цель, то вы можете решить эту проблему, используя position: absolute; на #input1 .

 * {
  font-family: monospace;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  width: 330px;
  height: 30px;
  border: 1px solid black;
  display: flex;
  justify-content: left;
  align-items: center;
}

#input1 {
  margin-left: 35%;
  width: 70px;
  transition: .8s;
  position: absolute;
}

#input1:hover {
  width: 300px;
  margin: 0px 15px;
}

.span1 {
  display: inline-block;
  float: left;
  margin-left: 20px;
} 
 <div class="container">
  <span class="span1">what do you have to do?</span>
  <input id="input1" type="text" placeholder="">
</div>

Ответ №2:

Вы можете попробовать это:

 .container {
  width: 330px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid black;
  display: flex;
  align-items: center;
}

#input1 {
  margin-left: 250px;
  width: 70px;
  transition: .8s;
  z-index: 10;
}

#input1:hover {
  width: 100%;
  margin: auto 0;
}

.span1 {
  position: absolute;
} 
 <div class="container">
  <span class="span1">what do you have to do?</span>
  <input class="input1" id="input1" type="text" placeholder="">
</div>
Метки: