Question

我正在开发一个基本项目，我想显示一个包含输入标签和提交按钮的表单，我正在使用Bootstrap 4作为我的Project.What我想要的是最初只有隐藏的输入标签提交按钮。其次，当一个人在输入上盘旋时，Seacrh按钮应该滑动显示在右侧，当有人专注于输入时，整个搜索按钮必须是可见的。

我所做的是为了达到目的而添加了css Transitions，但它们并不适用于我。

Html代码： -



<!DOCTYPE html>
<html lang="en">
<head>

<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style>
.ip-box
{
display:inline-block;
margin-right: 0px;
 }
 .bt-box{
 display:inline-block;
 margin-left: 0px;
  }
  .contain{
  width: 30%;
  margin: 0 auto;
   }

   .bt-box{
   transform: translate(-78px,-1px);
   transition: transform 2s ease-in-out;
   z-index: -1;
    }
    //This is not working
  .ip-box:hover #bt{
   z-index: 0;  
   transform: translate(-30px,-1px);
   }
    //This is not working
   .ip-box:focus #bt{
    z-index: 0;
    transform: translate(0px,-1px);

    }
   </style>

<body>

<div class="container py-5 bg-info">
<div class="contain">
<div class="ip-box mr-0"> <input type="text" class="form-control rounded-0 " id="inp" placeholder="Enter City Name" name="input-text"/> </div>
<div class="bt-box ml-0" id="bt"> <button type="submit" class="btn btn-primary rounded-0 mb-1">Search</button> </div>
</div>
</div>
</body>

</html>

面对Css转型的难点

0 个答案: