Проблема наложения выноски javascript

Question

Мне нужна помощь, чтобы исправить проблемы с выносками, когда они не скрываются снова после того, как указатель мыши отодвинут от значков, как показано на скриншоте.

Это часть кода 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>

Answer 1

Хорошая планировка!

Я думаю, что по какой-то причине ваше укрытие не было запущено. Вместо того, чтобы решать начальную проблему, мой подход будет заключаться не в добавлении функции 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);
    }
);

Они наверняка имеют идентификаторы из-за разных значков (хотя и дикое предположение). Этот подход может работать не так хорошо, но может соответствовать вашим потребностям.