1

I want all the other navbar images to be hidden when the user is on F+H.html, and for only #navbar-image-FH to show. If a user hovers over the respective navbar item however, then I want the image toggled and the unhovered version to be hidden.

I've tried doing this below by using the .hide mechanism in javascript, but it doesn't seem to be hiding them properly. What am I doing wrong?

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/

Andrew
  • 3,839
  • 10
  • 29
  • 42
  • you should probably be doing this with CSS and not JavaScript. Let me see if I can work up a sample – Glenn Ferrie May 18 '15 at 19:02
  • what's the difference between (lets say) 'navbar-image-HDS` and `navbar-image-HDS-unhovered' -- they both seem to be empty divs – Glenn Ferrie May 18 '15 at 19:04
  • @GlennFerrie Theyre basically a color (HDS) and black and white (unhovered) version of an image. In the css I set the background of the divs as the images so thats why the divs look empty. – Andrew May 18 '15 at 19:06
  • Check this out -- pretty straightforward. I think its a bit easier than what you're trying to do. http://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html – Glenn Ferrie May 18 '15 at 19:12
  • @GlennFerrie That's for hover, I'm trying to do the equivalent but for when a link is active, not when a user hovers over something. I tried using the `active` descriptor in CSS but it doesn't work. This js method worked for `index.html` but it isn't working for the others for some reason. – Andrew May 18 '15 at 20:55

0 Answers0