使用mouseenter显示和隐藏IE8中无法正常工作

Question

我正在为网站工作。

问题是当鼠标悬停在登录元素上时，搜索字段上的光标会通过已经有z-index的面板显示。

这适用于每个浏览器，但IE8。这是我的标记和解决方案。

请帮忙！

  <div class="search">
    <!--<a style="display:none" id="headerSearchlink" href="/lotfinder/searchresults.aspx" class="menu-btn"><span>Search</span></a>-->
    <div id="divHeaderAdvancedSearchUrl" style="display:none">/lotfinder/searchresults.aspx?entry=%%term%%&amp;action=search&amp;searchtype=u&amp;searchFrom=header&amp;searchSubmit=Search</div>
    <div id="divHeaderAdvancedSearchReplace" style="display:none">%%term%%</div>
    <form id="christiessearch" action="/lotfinder/searchresults.aspx" target="_parent" method="post">               
        <input id="headerSearchBox" type="text" placeholder="Search Keyword or Sale#" value="" maxlength="140">
        <button type="submit" class="button brown" id="headerSearchButton"></button>
    </form>

    <div class="mouse-area"></div>
  </div>

JS

$(document).ready(function() {
    $(".login").mouseenter(function() {
        $("input").hide();
    }).mouseleave(function() {
        $("input").show();
    });
});

任何帮助将不胜感激。我无法通过这个问题在线找到任何解决方案。