html - 将鼠标悬停在输入上，除法会受到影响

我有一个弹出框的以下CSS HTML代码。

我在容器外部插入了一个部门.pop。

现在，我希望将鼠标悬停在带有placeholder="Where do you want to go?"的输入上，以便增加弹出框的高度以提供有关随机位置的其他信息。

我怎样才能做到这一点？

div.pop {
  border: 2px solid red;
  height: 0px;
  position:absolute;
  background-color: blue;
  margin-top:-10px;
  margin-left: 90px;
  width: 400px;
}

div {
  display:inline;
}

  <div class="pop">
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <input class="inp1" type="text" placeholder="Where do you want to go?" />
        </div>
        <div class="col-sm-4">
          <input type="text" placeholder="Move in Date" />
        </div>
        <div class="col-sm-3"></div>
      </div>
    </div>
  </div>
          

最佳答案

很简单，您可以使用JQuery或Javascript执行此操作

jQuery示例：

$(document).ready(function() {
        $('.inp1').hover(function(){
            $('.pop').css('height','500px'); //This will expand
        },function(){
            $('.pop').css('height','0'); //This will go back to normal
        });
      });

关于html - 将鼠标悬停在输入上，除法会受到影响，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40436840/