Question

我正在尝试创建一个悬停来加载Facebook和社交Feed。鸣叫声。

我有jQuery在一起。但我遇到的问题是，只要用户将鼠标悬停在按钮之外，它就会淡出并且您无法单击该信息。

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

如何才能使用户仍然可以点击已打开div中的信息？

jQuery Code如下：

$(".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函数..

中

提前致谢，

Answer 1

我想你想要显示其中一个，如果是这样，请尝试以下方法。

DEMO

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

Answer 2

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

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

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

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

请记住，您的社交元素必须位于该区域内，因此您必须更改其部分显示属性。

Answer 3

尝试这样的事情：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");
});

jQuery在悬停时加载div并能够与该div交互

3 个答案: