时间戳

首页 > 解决方案 > 我如何悬停图标并显示输入

html - 我如何悬停图标并显示输入

问题描述

<div id='searchParent'>
    <!--icon to be hovered-->
    <i id="search" class="fas fa-search"></i>
    <!--icon to be hovered-->
        <div id="inputParent">
            <!--input to be shown-->
            <input type="text" placeholder='Pesquise' autocomplete='off' id="input-bar">
            <!--input to be shown-->
        </div>
</div>

我已经在这方面工作了很长时间，我能得到的最好的 CSS 悬停是：

#search:hover ~ #inputParent #input-bar {
    width: 200px;
}

但问题是，当您将输入悬停时，它只是将其拖出，您不能只写任何东西。图标在我的本地机器上，但我可能会把它们放在那里

编辑：我将展示我的一些糟糕的 CSS 以及我打算做什么。

input {
  border: none;
  outline: none;
  border-bottom: 0.3px solid black;
}

#search {
  padding-left: 180px;
  display: inline-block;
}

#inputParent {
    margin-left: auto;
}

#input-bar {
    margin-right: 1vw;
    width: 0;
    transition: 0.8s ease-in-out;
} 


#search:hover ~ #inputParent #input-bar {
    width: 200px;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  </head>
  
  <body>
    <div id="searchParent">
        <i id="search" class="fas fa-search"></i>
        <div id="inputParent">
            <input type="text" placeholder="Pesquise" autocoplete="off"       id="input-bar">
        </div>
    </div>
  </body>
</html>

我真正想做的是，当我将输入悬停时，它会留在那里。我真的不知道为什么酒吧是从左到右的，应该是倒退的

标签： htmlcss

解决方案

嗨，如果您能够向您的 HTML 添加一个新的 div 并向您的 HTML 添加一个类，inputParent这很容易。请看我的代码：

.dropdown {
  position: relative;
  display: inline-block;
}

#inputParent {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover #inputParent {
  display: block;
}
<div id='searchParent'> 
    <!--icon to be hovered-->
    <div class="dropdown">
    <i id="search" class="fas fa-search"></i>Icon
    <!--icon to be hovered-->
        <div id="inputParent" class="parentc">
            <!--input to be shown-->
            <input type="text" placeholder='Pesquise' autocomplete='off' id="input-bar">
            <!--input to be shown-->
        </div>
         </div>
</div>

推荐阅读