javascript - jQuery悬停功能滑动跨度

Question

我创建了一些共享按钮，试图让标准的推文、pin 等看起来更好一些。我创建了一个jsfiddle来演示我遇到的问题。它们几乎可以按预期工作，但是在悬停时，我需要跨度不碍事，以允许用户单击下面的按钮而无法弄清楚。如果你玩小提琴，你就会明白我的意思。

我的html：

<div class="sharebuttons">
    <ul>
        <li id="tweet"><span></span><a href="">tweet</a></li>
        <li id="like"><span></span><a href="">like</a></li>
        <li id="pin"><span></span><a href="">pin</a></li>
        <li id="plusone"><span></span><a href="">plusone</a></li>
    </ul>
</div>

JS：

$(document).ready(function(){
    $('.sharebuttons ul li span').hover(function(){
        $(this).slideUp();
    }, function(){
        $(this).slideDown();
    });
});

工作小提琴在这里

http://jsfiddle.net/bgxZB/

Answer 1

您需要将悬停定位在li而不是span：

$(document).ready(function(){

    $('.sharebuttons ul li').hover(function(){
        $(this).find('span').slideUp();
    }, function(){
        $(this).find('span').slideDown();
    });

});

演示