Question

我有一个搜索栏。将鼠标悬停在其上后，将显示输入字段。但是，一旦它“悬停”了，它当然就会消失。这是简单的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>

这是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;
}

当鼠标不再位于搜索容器div上时，有没有办法延迟动画？这样用户就有时间输入搜索数据。我已经看到了一些与过渡延迟类似的问题和答案，但是我无法实现解决方案。

谢谢。

Answer 1

以下内容应为您提供帮助：

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

延迟“悬停”动画

1 个答案: