Show another div during form input hover-CodePudding

I'm trying to create a simple search bar animation, more specifically, when hovering over the bar, the search history pops up. However, when I try .search-bar-input:hover .search-history, code doesn't work. I'm new to html, so it's possible it's a basic bug - but I can't find an answer anywhere

<div >
    <form  autocomplete="off">
        <input type="text"  name="search-request" placeholder="Type here..." required minlength="4" maxlength="32">
    </form>
    <div >
        search history
    </div>
</div>

.search-bar-input
{
    text-align: center;
    height: 50px;
    width: 150px;
    margin: auto;
}

.search-bar-input:hover
{
    border: solid 2px lightgrey;
    outline: none;
}

.search-history
{
    display: none;
    height: 50px;
    width: 150px;
    background-color: rgb(226, 226, 226);
}

.search-bar-input:hover   .search-history
{
    display: block;
}

.search-history:hover
{
    display: block;
}

CodePudding user response：

Have you tried displaying the website using different web browsers with the same result? Are you using an older web browser?

CodePudding user response：

You need to add your code when you are hovering the form, not the input field

.search-bar-input {
  text-align: center;
  height: 50px;
  width: 150px;
  margin: auto;
}

.search-bar-input:hover {
  border: solid 2px lightgrey;
  outline: none;
}

.search-history {
  display: none;
  height: 50px;
  width: 150px;
  background-color: rgb(226, 226, 226);
}

.search-form:hover .search-history {
  display: block;
  /* color: red; */
}

.search-history:hover {
  display: block;
}

<div >
  <form  autocomplete="off">
    <input type="text"  name="search-request" placeholder="Type here..." required minlength="4" maxlength="32">
  </form>
  <div >
    search history
  </div>
</div>

CodePudding user response：

You can do something like this:

.search-bar-input
{
    text-align: center;
    height: 50px;
    width: 150px;
    margin: auto;
}

.search-bar-input:hover
{
    border: solid 2px lightgrey;
    outline: none;
}

.search-history
{
    display: none;
    height: 50px;
    width: 150px;
    background-color: rgb(226, 226, 226);
}

.search-bar:hover .search-history
{
    display: block;
}

<div >
    <form  autocomplete="off">
        <input type="text"  name="search-request" placeholder="Type here..." required minlength="4" maxlength="32">
    </form>
    <div >
        search history
    </div>
</div>

It will affect .search-history when you hover .search-bar