Question

尝试在页面加载时加载一个图像，然后隐藏其他三个图像。然后在鼠标悬停时隐藏其他三个并在悬停时显示相应的图像。在加载时它可以很好地工作，但在悬停时所有图像都会消失。以下是代码。

    <!-- 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

你先做

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

但随后从不在任何这些元素上调用show。

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

影响img元素，但父母仍然隐藏。添加一个鼠标悬停功能中的$('.phone-one').show();将解决您的问题。请记住更改手机 - 以匹配您尝试显示的div类（您应该使用这些div的ID）。

另外，请看一下chrome或firefox中的开发人员工具。它会帮助您了解您的javascript如何影响您的DOM，以便您以后可以更轻松地追踪问题。

jQuery在加载时显示1个图像并在鼠标悬停上隐藏其他人

1 个答案: