javascript标注覆盖问题

Question

我需要帮助，试图解决标注问题，他们不再隐藏后，鼠标悬停是从图标移开，如截图所示。

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

Answer 1

漂亮的布局！

我想不管是什么原因，你的隐藏事件都不会被触发。我的方法不是解决最初的问题，而是不向.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);
    }
);

由于图标的不同，THey几乎肯定都有id(不过这是胡乱猜测)。这种方法可能不会执行得很好，但可能会满足您的需求。