jQuery如何影响mouseOver上的单个元素

Question

由于我还在学习，这个问题似乎很容易回答，但我仍然需要问。

如何更改此脚本，使其不会显示所有工具提示？

现在发生的事情是每当我将鼠标悬停在.pink-nose a 上时，所有.tooltip 都会同时消失

    $(function(){
        var pn = $('.pink-nose a')
        var tp = $('.pink-nose .tooltip')

        tp.css({'display':'none'})
        pn.mouseover(function(){
            tp.fadeIn()            
        })
    })

提前感谢您的帮助

Answer 1

不要在处理函数中使用tp，而应该从this（鼠标悬停的元素）开始，并遍历到其相关的工具提示。像这样的：

$(function(){
    $('.pink-nose .tooltip').hide();

    $('.pink-nose a').mouseover(function(){
        $(this).parents('.pink-nose:first').find('.tooltip').fadeIn();
    })
})

确切的遍历将取决于您的标记结构，请查看jQuery documentation for Traversing 找出最有效的方法。

Answer 2

$('.pink-nose .tooltip').hide().each(function() {
    var $this = $(this);
    $this.parents('a').mouseover(function() {
        $this.fadeIn();
    });
});