0

スクリーンショットに示されているように、マウスホバーをアイコンから離した後、コールアウトの問題が再び非表示にならないようにするための支援が必要です。

これは、headセクションのjsコードの一部です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<script>
$(document).ready(function () {
    // TOP NAV DROPDOWNS
    $('nav div ul li').hover(
        function () {
            $(this).children('div').slideDown("fast");
        }, 
        function () {
            $(this).children('div').slideUp("fast");
        }
    );
    // HOMEPAGE SERVICES SLIDE OUTS
    $('.right-slide a').hover(
        function () {
            $(this).siblings('.info-bubble').show('slide', {direction: 'left'}, 100);
        }, 
        function () {
            $(this).siblings('.info-bubble').hide('slide', {direction: 'left'}, 100);
        }
    );
    $('.left-slide a').hover(
        function () {
            $(this).siblings('.info-bubble').show('slide', {direction: 'right'}, 100);
        }, 
        function () {
            $(this).siblings('.info-bubble').hide('slide', {direction: 'right'}, 100);
        }
    );
    // RESETS POPULATED FIELDS
    $('.clear-field').each(function() {
        var default_value = this.value;
        $(this).focus(function() {
            if(this.value == default_value) {
                this.value = '';
                $(this).removeClass('clear-field');
            }
        });
        $(this).blur(function() {
            if(this.value == '') {
                this.value = default_value;
                $(this).addClass('clear-field');
            }
        });
    });
});
</script>

スクリーンショット

http://i50.tinypic.com/2ia66g3.png

これはhtmlコードです

  <div class="home-services">

        <div class="home-service right-slide home-web-hosting">
            <a href="/web-hosting/">WEB HOSTING</a>
            <div class="info-bubble">
                <h2>Web Hosting</h2>
                Company's custom server clustering and all-out IT management services keep your hosting needs running efficiently.
            </div>
        </div>

        <!--- RESELLERS -->
        <div class="home-service right-slide home-resellers">
            <a href="/resellers/">RESELLERS</a>
            <div class="info-bubble">
                <h2>Resellers</h2>
                Company's free Auto-Install Script Hosting Software, free White-Label Name Servers, intuitive Domain Panels and organic site builder options get you up and running in no time.
            </div>
        </div>

        <!--- VPS -->
        <div class="home-service right-slide home-vps">
            <a href="/virtual-private-servers/">VPS</a>
            <div class="info-bubble">
                <h2>Virtual Private Servers</h2>
                Company's robust 
                managed VPS servers and strong system resources offer 
                top-shelf performance at a fraction of the cost of dedicated 
                servers.
            </div>
        </div>

        <!--- SEARCH-->
        <div class="home-service left-slide home-search">
            <a href="/other-services/domain-registration.php">DOMAIN<br>SEARCH</a>
            <div class="info-bubble">
                <h2>Domain Search</h2>
                Easily transfer your current domain to LogicWeb. You can also register a new domain, bulk domains with significant discounts. We offer over 30 TLDs to 
                register from.
            </div>
        </div>

        <!--- DEDICATED SERVERS -->
        <div class="home-service right-slide home-dedicated-servers">
            <a href="/dedicated-servers/">DEDICATED<br>SERVERS</a>
            <div class="info-bubble">
                <h2>Dedicated Servers</h2>
                Need IT support? Company's managed dedicated servers and clustering possibilities, certified 24/7  Support engineers , IAVA/CloudLinux hosting 
                focused on quality. We'll manage your data so you don't have to.
            </div>
        </div>

        <!--- LOGICWEB VIDEO -->
        <div class="home-service left-slide home-logicweb-video">
            <a href="/">NETWORK TOUR</a>
            <div class="info-bubble">
                <h2>Network Tour</h2>
                Watch a brief video tour of our network infrastructure and learn more about our dedication to data protection, network redundancy and state-of-the-art data
                center facility.     
            </div>
        </div>

        <!--- CLOUD HOSTING -->
        <div class="home-service left-slide home-cloud-hosting">
            <a href="/cloud-hosting/">CLOUD<br>HOSTING</a>
            <div class="info-bubble">
                <h2>Cloud Hosting</h2>
                Company's Groundbreaking Hosting offers security, stability and superior server uptime, making traditional server instability issues yesterday's news.
            </div>
        </div>

        <!--- OTHER SERVICES -->
        <div class="home-service left-slide home-other-services">
            <a href="/other-services/email.php">OTHER<br>SERVICES</a>
            <div class="info-bubble">
                <h2>Other Services</h2>
                Domains, Colocation, Marketing, SSL, Merchant Accounts—whatever you need, it's here.
            </div>
        </div>

    </div>
4

1 に答える 1

0

素敵なレイアウト！

なんらかの理由であなたの非表示イベントは発生していないと思います。最初の問題に取り組む代わりに、私のアプローチは、mouseout関数を.hover（）に追加するのではなく、現在hover（）でホバーされているフライアウト以外のすべての表示されたフライアウトを非表示にすることです。例を挙げて説明しましょう。

あなたのコードには次のものがあります：

$('.left-slide a').hover(
    function () {
        $(this).siblings('.info-bubble').show('slide', {direction: 'right'}, 100);
    }, 
    function () {
        $(this).siblings('.info-bubble').hide('slide', {direction: 'right'}, 100);
    }
);

代わりにこれを試してみましょう：

$('.left-slide a').hover(
    function () {
        $('.left-slide .info-bubble:visible:not(#'+$(this).attr('id')+')').hide('slide', {direction: 'left'}, 100);
        $(this).siblings('.info-bubble').show('slide', {direction: 'right'}, 100);
    }
);

アイコンが異なるため、すべての人がIDを持っていることは間違いありません（ただし、ここでは大げさです）。このアプローチはうまく機能しないかもしれませんが、あなたのニーズに合うかもしれません。

于 2012-11-30T19:49:07.690 に答える