CSS转换按钮悬停

Question

我的网站上有4个css动画悬停按钮。

http://awesomescreenshot.com/0d72922ff4

当你“悬停”在“ÖPPETTIDER”和“KONTAKT”上时，“NYHETER”背景图像消失（动画向左移动）。

但我还希望“NYHETER”按钮在悬停“POPPULÄRAVAROR”按钮时消失。

CSS

#menu-nav li.menu-nav a {
    background:url(images/arrowTest2.png) no-repeat;
    background-position:top right; 
    margin:0 0 15px 0; 
    padding:0 20px 0 0; 
    color:#000; 
    text-transform:uppercase; 
    font-size:33px; 
    width: 95%;
    transition: background-position 0.5s ease-in-out 0s;
    list-style:none;
}
#menu-nav li.nav a {
    background-position:-300px 0;
}
.active{
    background-position:-300px 0;
}
.padding-top{padding-top:30px}
.no-nav{background:none!important;background-position:-300px 0!important;padding:0!important}

jQuery的，

jQuery(window).ready(function($){
    //alert("Hello");
    $("#menu-nav li.menu-nav").each(function(i){
        $(this).addClass('nav').siblings('.active').removeClass('nav');
    });



    $("#menu-nav li.menu-nav").hover(function() {
        $(this).removeClass('nav').siblings().addClass('nav');
        }, function() {
            $(this).addClass('nav').siblings('.active').removeClass('nav');
    //
        }).on('click', function() {
            $(this).removeClass('nav').addClass('active').siblings().addClass('nav').removeClass('active');
    });
    $("#menu-nav li.active").removeClass('nav');

});