How do i hover a icon and it displays a input

Question

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

I´ve been working in this for a really long time, and the best piece of css hover i could get was this:

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

But the problem is that when you hover the input it just drag it way out and you cant just write anything. The icons are in my local machine but i will prolably put them in there

EDIT: I´m going to show some of my poor css and what i was intending to do.

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>

What i really wanted to do was to when i hovered the input it stay there. I really dont know why the bar is going from the left to the right, it was suposed to go backwards

Hi and welcome to SO! I think we will need more code (especially css) to see your problem. Do you know that you can insert runnable html/js/css snippets directly to your question? — lupz, May 20 '20 at 07:36
Hover would be the wrong method here since when you move the mouse to the input you stop hovering the icon and the input will disappear. I'd find another method. — Paulie_D, May 20 '20 at 07:38
@Paulie_D this is quite easy if he adds a div class around his icon and input section. See my answer. — John, May 20 '20 at 07:57
@John I'm aware ...changing the HTML would be one of the "other methods" I mentioned but I don't know if the OP can do that. — Paulie_D, May 20 '20 at 07:58

John · Accepted Answer · 2020-05-20T12:30:32.050

0

Hi If you are able to add a new div to your HTML and add a class to your inputParent this is quite easy. Please see my code:

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

edited May 20 '20 at 12:30

answered May 20 '20 at 07:52

John

5,132
1
6
17

Nice little trick, hadn't seen it like that before, thanks for sharing! – Rene van der Lende May 20 '20 at 12:21
Hey no problem! It's certainly not ideal as if you hover away from the input box or the icon, the input box disappears, but its literally the answer to what the OP was asking. I would personally do an onclick event with a hide and show so it doesn't go away instead of doing a hover event. – John May 20 '20 at 12:25
Not tested your code yet, but what if you had made the `.dropdown` an `` and used `:focus` instead? Check my snippet at [SO60723244](https://stackoverflow.com/a/60723884/2015909), something similar with a double `:hover` and click to remove (loose `:focus` actually). Don't mind the layout, that sucks. I'm going to try something like that with your code and see how it pans out. Just love little snippets like this, tiny solutions to have in the back of your mind.... – Rene van der Lende May 20 '20 at 12:37
@RenevanderLende If you work on focus of the icon/link, the input will vanish as soon as you click on it (As the original element loses focus) – DBS May 20 '20 at 12:44
@DBS Absolutely true, when the `` and `.dropdown` are siblings. But when `.dropdown` is a child of `` and is shown on `:hover` and `:focus` of `` it will be persistent until the user clicks elsewhere. A bit beyond the scope of this question, I know, but a fun non JS puzzle nonetheless. – Rene van der Lende May 20 '20 at 12:50
You guys are making me remember something I did a long time ago to display a "dropdown" like this in only CSS but I used a checkbox in which I was able to hide the actual check box but make it clickable to the whole div. And once clicked I was able to display an input filed and since it was a checkbox it wouldn't disappear when hovered away from. – John May 20 '20 at 13:01
@RenevanderLende Hmm, fair enough, though I think if you were to do that I would probably give the icon a `tab-index` to make it focus-able, instead of using an `a` so you don't have the semantic confusion of a non-link/anchor `a` element. – DBS May 20 '20 at 13:02
@DBS, I never use `tabindex`, so I just checked MDN comments [MDN tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) on the subject and your solution makes sense as anything `:focus`able would do. But with large content (and child elements) you would get scrolling issues and there would be [MDN tabindex, accessibility concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#Accessibility_concerns), hence extra work with the possibility of new bugs (or 'hidden features'??). I may to favour a focusable element over `tabindex`. – Rene van der Lende May 20 '20 at 13:15
@DBS, but for icons and small (data)entry stuff, yep, why not. `tabindex` seems smart enough. Will give it a try and make some comparable solutions to toy with. – Rene van der Lende May 20 '20 at 13:21

How do i hover a icon and it displays a input

1 Answers1