javascript callout overlay issue

Question

I need assistance trying to fix the callout issues where they do not hide again after the mouse hover is moved away from the icons as shown in the screenshot.

This is part of the js code in the head section

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

Screenshot

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

This is the html code

  <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

Nice layout!

I think for whatever reason your hide event is not being fired. Instead of tackling around with the initial problem, my approach would be not to add a mouseout function to the .hover() but rather to hide all shown flyouts other then the one currently hovered on hover(). Let me explain by example:

In your code you have:

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

Let's try this instead:

$('.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);
    }
);

THey all most certainly have id's because of the different icons (wild guess here though). This approach might not perform as well, but might match your needs.