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);
    }
);

由于图标不同，所有的人肯定都有id（虽然在这里猜测很疯狂）。此方法可能效果不佳，但可能符合您的需求。