当元素扩展宽度时，使用:hover正确居中元素。

Question

当元素扩展宽度时，使用:hover正确居中元素。

4

我希望当你聚焦或悬停在输入框上时，它可以完美居中。

因此，我希望它在中间扩展宽度，而不是向右扩展或产生类似效果。

The code:

.container {
   margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
   width: 142px;
}

.textbox { 
   border: 1px solid #848484; 
   outline: 0; 
   height: 25px; 
   width: 125px; 
   padding: 2px 20px 2px 20px;
  }
  
input { 
   text-align: center;
   width: 100px;
   transition: ease-in-out, width .35s ease-in-out;
   margin-bottom: 3px;
   margin-top: 3px;
}

input:hover, input:focus { 
   width: 150px;
   margin-bottom: 3px;
   margin-top: 3px;
}

<div class="container">
   <input type="text" class="textbox" placeholder="Some text in here!">
</div>

- Vissie

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert · Accepted Answer

您遇到的问题是由于.container的固定宽度值小于您在:hover上应用于输入框的宽度所导致的。

消除固定宽度并应用属性text-align:center（居中输入框）将使悬停效果按预期运行。

.container {
 margin-top: 50px;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

.textbox { 
   border: 1px solid #848484; 
   -moz-border-radius-topleft: 30px;
   -webkit-border-top-left-radius: 30px;
   border-top-left-radius: 30px;
   -moz-border-radius-topright: 30px;
   -webkit-border-top-right-radius: 30px;
   border-top-right-radius: 30px;
   outline: 0; 
   height: 25px; 
   width: 125px; 
   padding: 2px 20px 2px 20px;
  }
  
input { 
   text-align: center;
   width: 100px;
   transition: ease-in-out, width .35s ease-in-out;
   margin-bottom: 3px;
   margin-top: 3px;
}

input:focus { 
   width: 150px;
   margin-bottom: 3px;
   margin-top: 3px;
}

input:hover { 
   width: 150px;
   margin-bottom: 3px;
   margin-top: 3px;
}

/* Ignore this */

p {
  margin-top: 30px;
  color: #a6a6a6;
  text-align: center;
}

<!-- Thanks for helping :p !-->

<div class="container">
   <input type="text" class="textbox" placeholder="Some text in here!">
</div>

<!-- Ignore !-->
<p> So as you can see the width will expand to the right, how would I be able to center it while it's moving and keeping it centered?</p>