悬停在输入和部门受到影响

Question

我有以下CSS代码为弹出框。 我在容器的外面插入了一个划分类“pop”。 现在，我希望悬停在占位符“你想去哪里”的输入上，以便弹出框的高度增加，以提供有关随机位置的附加信息。 我该怎么做？

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

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

Answer 1

CSS没有父母，独生子女选择。你可以用js做你想做的。或者改变你的结构

Answer 2

由于CSS没有父母选择器，你可能需要使用JavaScript。

HTML

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

JS

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

你可以做的是添加CSS transition财产上的父类和的mouseenter /离开添加/删除另一个增加高度的课程。它会带来不错的视觉效果。此外，您可以考虑使用文本输入，而不是使用焦点/模糊事件，因为它们对用户更直观。