我正在研究一个包含搜索栏的项目,当您将鼠标悬停在其中任何一个上时,图标周围的小圆圈的背景都会放大以包围实际字段。
这是我的代码:
<div class='swhole'>
<div class='embtn'><div id="searchproduct" style="font-size:calc(1vw + 1vh);cursor:pointer; display: inline;" onClick="searchProducts()">🔍</div>
<input id="search" style=" color: white; position:absolute; top: calc(((2vw + 1vh)/2)-(1vw + 1vh); ); ; left: 3vw; display: inline; border-style: none; outline: none; background: transparent; width: 25vw; font-size: calc(1vw + 1vh); " type="text" placeholder=" Search..." name="search" required>
</div>
</div>
这使用以下CSS:
.embtn {
position:absolute;
top:0vh ;
left: 0vw;
border-radius: 5vw;
padding: 0.2vw;
color: red;
width: calc(2vw + 1vh);
height: calc(2vw + 1vh);
background-color: white;
-webkit-transition: background-color 2s ease-out;
-webkit-transition: width 0.5s ease-out;
-o-transition: background-color 2s ease-out;
-o-transition: width 0.5s ease-out;
-moz-transition: background-color 2s ease-out;
-moz-transition: width 0.5s ease-out;
transition: background-color 2s ease-out;
transition: width 0.5s ease-out;
}
.embtn:hover {
background-color: black;
-webkit-transition: background-color 2s ease-out;
-webkit-transition: width 0.5s ease-out;
-o-transition: background-color 2s ease-out;
-o-transition: width 0.5s ease-out;
-moz-transition: background-color 2s ease-out;
-moz-transition: width 0.5s ease-out;
transition: background-color 2s ease-out;
transition: width 0.5s ease-out;
width: 30vw;
}
这应该是所有内容都在同一行上,但是在背景返回到默认位置后我遇到了一个问题...搜索栏转到下一行。
以下是一些屏幕截图:
如您所见,换行有点把整个样式弄乱了:(
任何建议将不胜感激。