Question

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

我在容器外插入了一个分类scala> object Z{ val a = b; val b = 5} <console>:12: warning: Reference to uninitialized value b object Z{ val a = b; val b = 5} ^ defined object Z scala> Z.a res12: Int = 0 。

现在，我希望将.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;
}

Answer 1

很简单，您可以使用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
        });
      });

Answer 2

CSS没有父母的选择器，只有孩子。你可以用js做你想做的事。或者改变你的结构

Answer 3

由于CSS没有父选择器，您可能需要使用javascript。

＆＃13;

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

＆＃13;

<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>

＆＃13;

您可以做的是在父类上添加CSS transition属性，在mouseenter / leave上添加/删除另一个增加高度的类。它会产生很好的视觉效果。此外，您可以考虑使用文本输入，而不是使用焦点/模糊事件，因为它们对用户更直观。

悬停在输入和分区受到影响

3 个答案: