0

我正在尝试创建一个悬停来加载 Facebook 和 Twitter 的社交提要。

我已经把 jQuery 放在一起了。但是我遇到了一个问题，即一旦用户将鼠标悬停在按钮之外，它就会淡出并且您无法单击该信息。

我为此创建了一个jsFiddle，如您所见，您将鼠标悬停在它加载内容的 a.social 上。但是一旦您尝试与加载的 DIV 交互，它就会消失。

我怎样才能使用户仍然可以单击打开的 div 中的信息？

jQuery代码如下：

$(".social_facebook").css('display','none');
$(".social_twitter").css('display','none');

    $('a.facebook').hover(function() {
        $('.social_facebook').fadeIn("slow");
    }, function() {
        $('.social_facebook').fadeOut("slow");
    });

    $('a.twitter').hover(function() {
        $('.social_twitter').fadeIn("slow");
    }, function() {
        $('.social_twitter').fadeOut("slow");
    });

这包含在 document.ready 函数中。

提前致谢，

4

3 回答 3

2

我想您想展示其中任何一个，如果是这样，请尝试以下方法。

演示

$(".social_facebook").css('display','none');
$(".social_twitter").css('display','none');

$('a.facebook').mouseenter(function() {
    $('.social_twitter').fadeOut("slow", function () {
        $('.social_facebook').fadeIn("slow");
    });        
});

$('a.twitter').mouseenter(function() {
    $('.social_facebook').fadeOut("slow", function () {
        $('.social_twitter').fadeIn("slow");
    });        
});

 //Added
$('.social_facebook, .social_twitter').mouseout(function () {
   $(this).fadeOut('slow');
});
于 2012-04-13T15:14:01.793 回答
1

因为您已将mouseout方法设置为隐藏而div没有意识到。该$.hover方法的第二个函数参数实际上是告诉它当鼠标离开目标时要做什么。

这是您更新的小提琴：http: //jsfiddle.net/ujBZY/2/

要在离开“区域”时隐藏它们，只需定义一个包装元素并添加一个mouseout：

$('.main-area').mouseout(function() {
    $('.social_facebook').hide();
    $('.social_twitter').hide();
});

请记住，您的社交元素必须在该区域内，因此您必须更改它们的一些显示属性。

于 2012-04-13T15:12:57.847 回答
1

尝试这样的事情：http: //jsfiddle.net/ujBZY/9/

ul {
    margin:0;
    padding:0;
}
li.social {
    display: inline-block;
    list-style:none;
    overflow:visible;
}
 a {
    display: block;
    height: 61px;
    margin: 0 5px;
    text-indent: -9000px;
    width: 61px;
}

.social_facebook, .social_twitter {
    position: absolute;
    right:0;
    background: white;
    z-index: 1000;
}

.sociallinks {
    float: right;
}

.facebook {
    background: url(http://i44.tinypic.com/smys80.png) no-repeat;
}

.twitter {
    background: url(http://i44.tinypic.com/10fno04.png) no-repeat;
}
<div class="span5">
    <div class="sociallinks">
        <ul>
            <li class="social"><a href="#" target="_blank" class="facebook" title="Join Us on Facebook">Join us on Facebook</a>
                <!-- Hidden Social Feeds -->
                <div class="social_facebook">
                        FACEBOOK HERE
                </div>
            </li>
            <li class="social"><a href="#" target="_blank" class="twitter" title="Follow Us on Twitter">Follow us on Twitter</a>
                <div class="social_twitter">    
                    <a href="http://twitter.com/" title="Follow us on Twitter">Latest Tweet</a>
                    <a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-lang="en" data-size="large">Follow @twitter</a>

                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>  
                </div>
            </li>
        </ul>                
    </div>
</div>


$(".social_facebook").css('display','none');
$(".social_twitter").css('display','none');

$('.social').hover(function() {
    $('div', this).stop().fadeIn("slow");
}, function() {
    $('div', this).stop().fadeOut("slow");
});
于 2012-04-13T15:19:17.360 回答