jQuery如何影响mouseOver上的单个元素 [英] jQuery How to affect Single element on mouseOver

问题描述

在我仍在学习的过程中，这个问题似乎很容易回答，但我仍然需要提出疑问.

As I'm still learning, this question might seem to be very simple to answer, but I still need to ask.

我该如何更改此脚本，因此它不会显示所有工具提示?

How do I need to change this script, so it will not display all the tooltips?

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

What is happening now is whenever I hover on .pink-nose a all the .tooltip are fading in at this same time

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

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

谢谢您的帮助

推荐答案

而不是在处理函数中使用tp，您应该从this(鼠标悬停的元素)开始，并遍历其相关的工具提示.像这样:

Instead of using tp in the handling function, you should start from this (the element that was moused over), and traverse to its related tooltip. Something like this:

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

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

确切的遍历将取决于标记的结构，请查看用于遍历的jQuery文档找出最有效的方法.

The exact traversal will depend on the structure of your markup, take a look at the jQuery documentation for Traversing to figure out what will work best.

这篇关于jQuery如何影响mouseOver上的单个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！