元素仍然认为它是从光标下移动后徘徊的

Question

“解决方案”编辑：我最后只是更改了布局以解决此问题，如下所示。最初的问题行为也出现在其他浏览器中，因此我只是将按钮保持在原位，而不是在打开搜索框时将其滑动到左侧。

---------原始问题---------

我不确定如何说出我的头衔，但让我解释一下我的问题。使用纯CSS和HTML，我正在扩大搜索框。我遇到的问题是关闭搜索框时，如果你不移动鼠标，按钮仍然会显示为悬停，即使它已移动。这是我的问题：

如果可能，我该怎么做才能防止这种情况发生？即使您在单击时移动它，它也只会混淆动画的外观。动画比显示的更平滑。在W7上使用最新的Chrome。

CSS：

div#nav-search {
  display: inline-block;
  height: 34px;
  float: right;
  font-size: 0;
  width: 60px;
  position: absolute;
  top: 43px;
  right: 0;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
nav#header-nav.small div#nav-search {
  top: 18px;
}
div#nav-search.open {
  background-color: #FFBC43;
  width: 95%;
}
div#nav-search-wrapper {
  display: inline-block;
  vertical-align: top;
  height: 34px;
  width: calc(100% - 60px);
  margin: 0;
  padding: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
button#nav-search-btn { 
  display: inline-block;
  height: 34px;
  width: 60px;
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
button#nav-search-btn span { 
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  -o-transform: skew(45deg);
  display: block;
  width: 100%; 
  height: 100%;
  background-image: url({{ 'search-gold.png' | asset_url }});
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: background 0.2s ease-in-out;
  -moz-transition: background 0.2s ease-in-out;
  -ms-transition: background 0.2s ease-in-out;
  -o-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}
button#nav-search-btn:hover { 
  background-color: #FFBC43;
}
button#nav-search-btn:hover > span, div#nav-search.open > button#nav-search-btn span { 
  background-image: url({{ 'search-brown.png' | asset_url }});
}

HTML：

<div class="nav-right transition">
  <span class="phone-number">{{ settings.company_phone }}</span>
  <div id="nav-search">
    <button id="nav-search-btn"><span></span></button>
    <div id="nav-search-wrapper">Wrapper filler text</div>
  </div>
  <a href="/cart" id="nav-cart-btn"></a>        
</div>