I am currently in the process of designing a search bar animation. Specifically, I want the search history to appear when hovering over the search bar. However, I am facing an issue where the code doesn't seem to work when I use .search-bar-input:hover + .search-history. As someone who is new to HTML, I suspect it might be a simple error, but unfortunately, I haven't been able to find a solution anywhere.
<div class="search-bar">
<form class="search-form" autocomplete="off">
<input type="text" class="search-bar-input" name="search-request" placeholder="Type here..." required minlength="4" maxlength="32">
</form>
<div class="search-history">
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;
}