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

Question

I am trying to make a searchbar using HTML/CSS/Jquery. Almost everything works fine, except for 1 thing: when the input field resizes, the mouse stays in hover-state, until I move the mouse. Why isn't my mouse changing to default after the element resized and how can i 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;    
}

a {
    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 a code snippet; open search and close it again -> don't move the mouse, the mouse wont change state to default (and the :hover effect stays active, until I move the mouse)

Answer 1

I think this is browser dependent. In my current Firefox 38.0.1 ESR the cursor (not moved) resets to default.