CODEWITHSUNDEEP
htmlcss
rishabh jain
rishabh jain

Reputation: 440

hover on input and division gets affected

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>

Upvotes: 1

Views: 77

Answers (3)

wscourge
wscourge

Reputation: 11301

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.

Upvotes: 0

Thanveer Shah
Thanveer Shah

Reputation: 3333

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
        });
      });

Upvotes: 1

Alexander Pulido
Alexander Pulido

Reputation: 124

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

Upvotes: 0

Related Questions