导航栏图像未正确隐藏

Question

我希望当用户在F+H.html上时隐藏所有其他导航栏图片，并且仅显示#navbar-image-FH。但是，如果用户将鼠标悬停在相应的导航栏项上，那么我希望切换图像并隐藏unhovered版本。

我已尝试在javascript中使用.hide机制执行此操作，但它似乎没有正确隐藏它们。我究竟做错了什么？

HTML：

<div class="navbar-item-set">

    <div class="navbar-item" id="navbar-item-ID2Games">

        <a href="index.html" >

            <div class="navbar-image" id="navbar-image-unhovered">
            </div>
            <div class="navbar-image" id="navbar-image-id2games">
            </div>

            <br>
            <div class="navbar-text">
                ID2 Games
            </div>
        </a>

    </div>

    <div class="navbar-item" id="navbar-item-FH">

        <a href="F+H.html">

            <div class="navbar-image" id="navbar-image-FH-unhovered">
            </div>
            <div class="navbar-image" id="navbar-image-FH">
            </div>

            <br>

            <div class="navbar-text">
                Fizz + Hummer
            </div>
        </a>

    </div>

    <div class="navbar-item" id="navbar-item-HDS">

        <a href="HDS.html">

            <div class="navbar-image" id="navbar-image-HDS-unhovered">
            </div>
            <div class="navbar-image" id="navbar-image-HDS">
            </div>

            <br>

            <div class="navbar-text">
                Human Delivery Service
            </div>

        </a>

    </div>

    <div class="navbar-item" id="navbar-item-contact">

        <a href="contact.html" >

            <div class="navbar-image" id="navbar-image-contact-unhovered">
            </div>
            <div class="navbar-image" id="navbar-image-contact">
            </div>

            <br>

            <div class="navbar-text">
                Contact
            </div>

        </a>

    </div>

</div>

使用Javascript：

if (window.location.href.match(/F+H\.html/)){
                $('#navbar-image-FH').show();

                $('#navbar-image-unhovered').hide();
                $('#navbar-image-id2games').hide();
                $('#navbar-image-HDS').hide();
                $('#navbar-image-HDS-unhovered').hide();
                $('#navbar-image-contact').hide();
                $('#navbar-image-contact-unhovered').hide();

                //
                $('#navbar-item-id2games').hover(function() {
                  $('#navbar-image-id2games').toggle();
                  $('#navbar-image-FH-unhovered').hide();
                }, function(){
                         $('#navbar-image-unhovered').toggle();
                         $('#navbar-image-id2games').hide();
                    });

                $('#navbar-item-HDS').hover(function() {
                      $('#navbar-image-HDS').toggle();
                      $('#navbar-image-HDS-unhovered').hide();
                    }, function(){
                             $('#navbar-image-HDS-unhovered').toggle();
                             $('#navbar-image-HDS').hide();
                        });

                $('#navbar-item-contact').hover(function() {
                      $('#navbar-image-contact').toggle();
                      $('#navbar-image-contact-unhovered').hide();
                    }, function(){
                             $('#navbar-image-contact-unhovered').toggle();
                             $('#navbar-image-contact').hide();
                        });
            }

JSFiddle： https://jsfiddle.net/bf83mtyL/