jQuery Show 1 Image on Load and Hide Others on Mouseover

Question

Trying to get one image to load on page load and then hide the other three images. Then on mouseover hide the other three and show the appropriate image on hover. On load it works perfectly, but on hover all of the images disappear. Below is the code.

    <!-- PHONE IMAGE -->
                <div class="col-md-4 col-sm-4 phone-one">
                    <div id="blocrst-1" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
                        <img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
                    </div>
                </div>
                <!-- PHONE IMAGE -->
                <div class="col-md-4 col-sm-4 phone-two">
                    <div id="blocrst-2" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
                        <img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
                    </div>
                </div>
                <!-- PHONE IMAGE -->
                <div class="col-md-4 col-sm-4 phone-three">
                    <div id="blocrst-3" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
                        <img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
                    </div>
                </div>
                <!-- PHONE IMAGE -->
                <div class="col-md-4 col-sm-4 phone-four">
                    <div id="blocrst-4" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
                        <img src="/images/venue-info.png" alt="" data-animation="pulse" data-animation-delay="800" />
                    </div>
                </div>

jQuery:

<script>
        jQuery().ready(function(){

            $('.phone-two').hide();
            $('.phone-three').hide();
            $('.phone-four').hide();

            $(function() {
                $("#btnBrowseEvents").mouseover(function() {
                    $("#blocrst-1").removeClass().addClass("phone-image wow fadeInRight");
                    $('.phone-two').hide();
                    $('.phone-three').hide();
                    $('.phone-four').hide();
                });
            });

            $(function() {
                $("#btnBottleService").mouseover(function() {
                    $("#blocrst-2").removeClass().addClass("phone-image wow fadeInRightBig");
                    $('.phone-one').hide();
                    $('.phone-three').hide();
                    $('.phone-four').hide();
                });
            });

            $(function() {
                $("#btnConnect").mouseover(function() {
                    $("#blocrst-3").removeClass().addClass("phone-image wow fadeInLeft");
                    $('.phone-one').hide();
                    $('.phone-two').hide();
                    $('.phone-four').hide();
                });
            });


            $(function() {
                $("#btnYourDigitalHost").mouseover(function() {
                    $("#blocrst-4").removeClass().addClass("phone-image wow fadeInLeft");
                    $('.phone-one').hide();
                    $('.phone-two').hide();
                    $('.phone-three').hide();
                });
            });


        });//end ready

    </script>

Answer 1

You first do

$('.phone-two').hide();
$('.phone-three').hide();
$('.phone-four').hide();

but subsequently never call show on any of these elements. The

$("#blocrst-2").removeClass().addClass("phone-image wow fadeInRightBig");

affects the img elements, but the parents are still hidden. Adding a $('.phone-one').show(); in your mouseover functions will fix your problem. Remember to change the phone-one to match the class of the div you're trying to show (you should really be using an id for these divs).

As an aside, take a look at the developer tools in chrome or firefox. It'll help you see how your javascript affects your DOM so you can track down issues more easily in the future.