javascript - Why does my cursor stay in 'hover' form after mij element resized? -

i trying make searchbar using html/css/jquery. works fine, except 1 thing: when input field resizes, mouse stays in hover-state, until move mouse. why isn't mouse changing default after element resized , how can fix this?

html snippet:

$(document).ready(function () {      'use strict';      var searchclicked = false;            $('.menu').on('click', function () {          $('.menu-panel').animate({'left' : '0px'}, 'ease', 'swing');          $('.overlay').toggle();      });            $('.overlay').on('click', function () {          $('.menu-panel').animate({'left' : -$('.menu-panel').width() - 200});          $('.overlay').toggle();      });            $('.search').on('click', function (e) {          if (!searchclicked) {                            $(this).animate({                  'padding-right' : '180px'              }, 'ease');                $(this).css({                  'background-color' : 'rgba(233, 30, 99, 1)',                  'color' : '#fff'              });                            $('#search-bar').animate({ 'width' : '150px'}, 'ease').focus();              searchclicked = true;                        } else {                       $('.search').animate({                  'padding-right' : '0px'              }, 'ease');                            $('#search-bar').css({ 'width' : '0px'});                  $(this).delay(100).queue(function (next) {                  $(this).css({                      'background-color' : '#fff',                      'color' : '#acacac'                  });                  next();              });              searchclicked = false;          }      });  });

html, body {      font-family: 'roboto', sans-serif;      background-color: #eef2f4;  }    .left { float: left !important; }  .right { float: right !important; }    li {      list-style: none;      }    {      text-decoration: none;      color: #212121;  }    .pink { color: rgba(233, 30, 99, 1);}    textarea:focus, input:focus{      outline: 0;  }    .wrapper {      position: relative;      width: 1280px;      margin: 0 auto;  }    .overlay{      position:absolute;      top:0px;      left:0px;      bottom:0px;      right:0px;      background-color: rgba(189,195,199, 0.5);      z-index: 98;      display: none;  }    /*============================================================*/  /*========================= header bar ========================*/  /*============================================================*/    header {      position: relative;      width: 100%;      height: 75px;      background-color: #fff;        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);      text-align: center;  }    .logo {       position: relative;      line-height: 75px;       font-size: 22px;       font-weight: 700;       color: rgba(33, 33, 33, 0.8);   }  .logo:hover { color: rgba(33, 33, 33, 0.6);  }    #search-bar {      position: absolute;      top: 28px;      right: 30px;      border: none;      font-size: 16px;      border-bottom: 1px solid #fff;      background-color: rgba(233, 30, 99, 0.01);      color: #fff;      width: 0px;      z-index: 999;  }    .navlinks {       display: block;      position: absolute;      top: 0;      line-height: 75px;      width: 65px;      height: 100%;      color: #acacac;  }    .navlinks:hover { background-color: rgba(233, 30, 99, 1) !important; color: #fff !important;}    .menu {left: 0px;}  .search {right: 0px;}    @media (max-width: 1280px) {      .wrapper {          width: 100%;          }  }    @media (max-width: 290px) {      .logo { font-size: 19px; }      .navlinks { font-size: 14px}  }    /*============================================================*/  /*========================= menu panel  ======================*/  /*============================================================*/    .menu-panel {      position: absolute;      top: 0;      left: -300px;      width: 300px;      height: 100%;      z-index: 99;      background-color: #fff;      box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);  }    @media (max-width: 320px) {      .menu-panel {          width: 210px;          }            .navlinks:hover { background-color: rgba(233, 30, 99, 1) !important; color: #fff !important;}  }

<!doctype html>  <html lang="en">  <head>      <meta charset="utf-8">        <link href='http://fonts.googleapis.com/css?family=roboto:500,100,300,700,400' rel='stylesheet' type='text/css'>      <link rel="stylesheet" href="css/normalize.css">            <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">      <link rel="stylesheet" href="css/style.css">            <title>poging #2</title>  </head>  <body>      <header>          <nav class="wrapper">              <ul class="left">                  <li><a href="#" class="navlinks menu"><i class="fa fa-bars fa-lg"></i></a></li>              </ul>                <a href="#" class="logo">logo</a>                                   <ul class="right">                  <input type="text" id="search-bar">              </ul>                            <a href="#" class="navlinks search"><i class="fa fa-search fa-lg"></i></a>          </nav>      </header>            <div class="menu-panel">                </div>      <div class="overlay"></div>            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>      <script src="js/script.js"></script>  </body>  </html>

edit: made code snippet; open search , close again -> don't move mouse, mouse wont change state default (and :hover effect stays active, until move mouse)

i think browser dependent. in current firefox 38.0.1 esr cursor (not moved) resets default.