Search Web Hover in HTML CSS

Question

I have my CSS and HTML like this:

.expanding-search-form {
  display: inline-block;
  width: auto;

}
.expanding-search-form .search-input {
 z-index: 2;
  height: 34px;
  width: 105px;
  float: left;
  transition: 250ms all ease-in-out;

}
.expanding-search-form .search-input:focus {
background-color: white;
  width: 490px;
  height: 40px;
  
}

<form class="expanding-search-form">
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon1"><i class="material-icons">search</i></span>
       <input type="search" class="form-control search-input" placeholder="Search" aria-label="Daftar Saran" aria-describedby="basic-addon1">
   </div>
</form>

And the result like this: https://i.stack.imgur.com/XnAWb.png

If my pointer not placed in search box it will look like the image:

If my pointer placed in search box it will hovered and covered the menu.

And now my problem is how to make the search box look like hovered but without the pointer placed in search box and covered the menu, thanks.

Answer 1

Add a :hover pseudo-class as a new selector.

.expanding-search-form {
  display: inline-block;
  width: auto;

}
.expanding-search-form .search-input {
 z-index: 2;
  height: 34px;
  width: 105px;
  float: left;
  transition: 250ms all ease-in-out;

}
.expanding-search-form .search-input:focus,
.expanding-search-form .search-input:hover {
background-color: white;
  width: 490px;
  height: 40px;
  
}

<form class="expanding-search-form">
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon1"><i class="material-icons">search</i></span>
       <input type="search" class="form-control search-input" placeholder="Search" aria-label="Daftar Saran" aria-describedby="basic-addon1">
   </div>
</form>

Answer 2

Did you mean like this?

.expanding-search-form {
display: inline-block;
width: auto;
}
.expanding-search-form .search-input {
z-index: 2;
height: 34px;
width: 105px;
float: left;
transition: 250ms all ease-in-out;
position : relative;
}
.expanding-search-form .search-input:focus {
background-color: white;
position: absolute;
width: 490px;
height: 40px;
}
.label{
position: relative;
z-index: 10;
float:left;
}

<form class="expanding-search-form">
   <div class="input-group">
      <input type="search" class="form-control search-input" placeholder="Search" aria-label="Daftar Saran" aria-describedby="basic-addon1">
      <div class="label"><span class="input-group-addon" id="basic-addon1"><i class="material-icons">search</i></span>
         [enter image description here][1]
      </div>
   </div>
</form>