javascript - 将鼠标悬停在任何段落上，在div上附加一些小信息，将鼠标悬停在它上面，它就会淡出，对吗？

http://jsfiddle.net/nicktheandroid/3AraQ/

将P悬停时，＃both都将附加到该段落并居中。当我将鼠标悬停在新段落上时，它会在第一个P处淡出，并在现在悬停的P处淡入。这是最好的方法吗？稍后，我将使用它来允许人们单击书签图像，然后当他们将P悬停在P上时，它将执行我下面的代码，然后在他们单击P时将创建到该段落的书签，但是我真的只需要以下代码的帮助。谢谢!

$('p').hover(function() {

    $(this).append('<span id="both">BOOKMARK THIS</span>')
        $('#both').animate({opacity: 1.0})

}, function(){
        $('#both').fadeOut(600, function(){
            $(this).remove()
        })
});

它工作不顺利，就是不正确...

最佳答案

只需使用类而不是id:

$('p').hover(function() {

    $(this).append('<span class="both">BOOKMARK THIS</span>')
        $('.both').animate({opacity: 1.0})

}, function(){
        $('.both').fadeOut(600, function(){
            $(this).remove()
        })
});

http://jsfiddle.net/yzXxH/