hover on input and division gets affected - html

Question

I have the following CSS HTML code for a pop-up box.
I have inserted a division class .pop outside the container.
Now, I wish to hover on input with a placeholder="Where do you want to go?" so that the pop-up box's height increases to provide additional information on random locations.
How can I do this?
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>

Answer 1

Its Simple, You can do this using JQuery or Javascript
JQuery Example:
$(document).ready(function() {
$('.inp1').hover(function(){
$('.pop').css('height','500px'); //This will expand
},function(){
$('.pop').css('height','0'); //This will go back to normal
});
});

Answer 2

CSS doesn't have selector for parents, only childs. You can do what you want with js. Or changing your structure

Answer 3

As CSS has no parent selectors, you probably going to need to use javascript for it.
var inputs = document.querySelectorAll('.parent-on-hover');
for( var i = 0; i < inputs.length; i++) {
this.addEventListener('mouseenter', function(e){
// find parent of .pop class and increase it's height
});
this.addEventListener('mouseleave', function(e){
// find parent of .pop class and decrease it's height
});
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="pop">
<div class="container">
<div class="row">
<div class="col-sm-4">
<input class="parent-on-hover inp1" type="text" placeholder="Where do you want to go?" />
</div>
<div class="col-sm-4">
<input class="parent-on-hover inp1" type="text" placeholder="Move in Date" />
</div>
<div class="col-sm-3"></div>
</div>
</div>
</div>
What you can do is to add CSS transition property on the parent class and on mouseenter/leave add/remove another class with increased height. It will acomplish nice visual effect. Also what you can consider with text inputs is using focus/blur events instead, as they are more intuitional for users.