0

我有这个清单：

<ol id="followUs">
    <li>Follow us</li>
    <li class="blog"><a href="#"></a></li>
    <li class="linkedIn"><a href="#"></a></li>
    <li class="twitter"><a href="#"></a></li>
    <li class="facebook"><a href="#"></a></li>
    <li class="smartPhone"><a href="#"></a></li>
    <li id="shareMore">More
        <ul id="socialMore" style="display: none;">
            <li id="youtube"><a href="#">Youtube</a></li>
            <li id="flickr"><a href="#">FlickR</a></li>
            <li id="slideshare"><a href="#">SlideShare</a></li>
            <li id="newsletter"><a href="#">Newsletter</a></li>
        </ul>
    </li>
</ol>

以及以下 jQuery：

<script>
jQuery(document).ready(function(){
    jQuery("li#shareMore").mouseenter(function() {
        jQuery('ul#socialMore').css("display","block");
        jQuery('span.popin_header_button').css("display","none");
    });

    jQuery("li#shareMore").mouseleave(function() {
        setTimeout( function(){
            jQuery('ul#socialMore').css("display","none");  
            jQuery('span.popin_header_button').css("display","block");
        },1000);
    });
})
</script>

第二个列表#socialMore 在页面加载时隐藏，我想在鼠标悬停时显示它，当我将鼠标悬停在#socialMore 列表周围时，它会保持在那里。问题是，当我仍然悬停在#socialMore 列表时，列表会出现和消失（除非第二个列表与第一个重叠，这是我不想要的）。

其次，我希望周围的员工位于列表下方，这不会发生，因此我需要隐藏这些。

对于 CSS，第一个列表 #followUs 是水平的，第二个列表 #shareMore 是垂直的。

任何人都可以在这里提出解决方案。不明白出了什么问题。

感谢路过。

10 月 15 日编辑

我将jQuery更改为：

jQuery("li#shareMore").hover(function() {
    jQuery('li#shareMore>ul').show();
},function(){
        setTimeout( function(){
            jQuery('li#shareMore>ul').hide();   
        },2000);
    }
);

它有效，但不稳定。有时，它工作得很好，有时，即使我还在第一个徘徊，ul 也会消失<li id="shareMore">More

编辑二：10 月 15 日

进一步推动它，我发现它并不是真的不稳定。逻辑是，在页面刷新时，如果我悬停li#shareMore而不转到>ul列表，它会按预期工作。当我第一次将鼠标悬停在>ul列表上时，它也可以按预期工作。但是，一旦我从>ul列表中悬停，从以下时间开始，>ul列表就会在 setTimeOut 时间内消失，在这种情况下为 2 秒。

但是，如果我将 setTimeOut 限制设置为 0，一切都会按预期进行。这是迄今为止的观察，除非我遗漏了什么。陌生的世界 ！

感谢任何提示>奇怪的情况。

编辑

似乎终于解决了，使用 cleartimeout: jquery hover and setTimeout / clearTimeOut

4

3 回答 3

0

您可以为此使用jquery的show()和功能。像hide()

 $('ul#socialMore').show();
 $('span.popin_header_button').hide();
于 2012-10-12T09:10:21.467 回答
0

你能试试下面的代码吗

jQuery("li#shareMore").on("mouseout", 'ul#socialMore li', function() {
    setTimeout( function(){
        jQuery('ul#socialMore').css("display","none");  
        jQuery('span.popin_header_button').css("display","block");
    },1000);
});

开始使用 jquery 的“on”事件。

于 2012-10-12T10:07:05.370 回答
0

你可以试试：

jQuery(document).ready(function(){
    jQuery("li#shareMore").mouseenter(function() {
       $('ul#socialMore').show();
    });

    jQuery("li#shareMore").mouseleave(function() {
       $('ul#socialMore').hide();
    });
})

见：jsfiddle

于 2012-10-12T10:00:49.933 回答