Delay "unhover" animation

Question

I have a search bar. After hovering on it the input field is shown. But as soon as it is "unhovered" from it, it of course disappears. Here is the simple HTML:

    <form role="search" method="get" class="search-form" action="http://localhost/.../">
    <div class="search-container">
        <label>
            <span class="screen-reader-text">Search for:</span>
            <input type="search" class="search-field" placeholder="" value="" name="s" role="search" tabindex="-1">
        </label>
        <button class="search-button" value="Search"><i class="astra-search-icon"></i></button>
    </div>
    </form>

And here is the CSS:

.search-container:hover .search-field {
    width: 150px !important;
}

.search-container:hover {
    -webkit-box-shadow:inset 0px -2px 0px 0px #FBB317;
    -moz-box-shadow:inset 0px -2px 0px 0px #FBB317;
    box-shadow:inset 0px -2px 0px 0px #FBB317;
}

Is there and way how to delay animation when the mouse is not anymore on the search-container div? So that users have some time to input search data. I have seen some similar questions and answers with transition-delay, but I was not able to achieve the solution.

Thank you.

add the transition on the element itself, not the hover. that might to the trick, i assume you added it in the `.search-container:hover` wich removes the transition when its not hovered anymore — Ramon de Vries, Sep 18 '20 at 13:24
Does this answer your question? [What is the opposite of :hover (on mouse leave)?](https://stackoverflow.com/questions/10995165/what-is-the-opposite-of-hover-on-mouse-leave) — SeeoX, Sep 18 '20 at 13:33

score 0 · Answer 1 · answered Sep 18 '20 at 13:26

The following should help you:

.search-container:hover .search-field {
  width: 150px !important;
  transition-delay: 0s;
}

.search-container:hover {
  box-shadow: inset 0px -2px 0px 0px #FBB317;
}

.search-field {
  width: 0;
  transition: 1s ease;
  transition-delay: 3s;
}

<form role="search" method="get" class="search-form" action="http://localhost/.../">
  <div class="search-container">
    <label>
      <span class="screen-reader-text">Search for:</span>
      <input type="search" class="search-field" placeholder="" value="" name="s" role="search" tabindex="-1">
    </label>
    <button class="search-button" value="Search">Search</button>
  </div>
</form>

Thank you for your help. For some reason the first animation is also delayed. — Ante Medic, Sep 18 '20 at 13:51

Delay "unhover" animation

1 Answers1