Question

我是网页设计师，不是Javascript / jQuery的程序员和新手（尽管我有PHP经验）

我有一个问题，理解为什么我似乎无法针对悬停效果定位正确的div。

小提琴在这里： http://jsfiddle.net/obmerk99/F6wJs/

当我定位某个div类（.mas）时，效果很好但是当我瞄准第二个div类（.meta2 - 绝对定位在第一个 - .mas的边界内）时，效果不起作用。

（简单的单词 - 我希望效果由拇指触发，而不是由大图像触发。）

代码是一样的，所以它不是语法错误 - 我确信我遗漏了一些关于理解jQUery的基本知识。

小心解释??

编辑我：

在了解了@Rick解释的内容之后 - 我必须说我的问题有点复杂，我只是发布了简单的版本，因为我认为这已经足够了。

真正的标记具有所述类的多个元素。

如果我从代码中删除“，this”，它将触发所有这些..

新小提琴： http://jsfiddle.net/obmerk99/F6wJs/1/

Answer 1

问题实际上是淡入淡出。在你小提琴的JQuery中，你有类似的东西：

jQuery(".meta",this).fadeIn(400);

告诉JQuery在 .meta中查找this ，关键字this在这里指的是外部选择器返回的JQuery对象。 / p>

换句话说，如果您的外部选择器是.mas，则JQuery仅在.meta内搜索.mas。如果外部选择器为.meta2，则仅在.meta内搜索.meta2。当然，.meta在.mas范围内，但不在.meta2范围内，因此您遇到了问题。

只需从每个淡入淡出调用中删除第二个参数（this）即可解决此问题。所以前面的那一行变成了：

jQuery(".meta").fadeIn(400);

更新的小提琴在这里：http://jsfiddle.net/qsQWU/1/

修改

正如其他答案和问题编辑所指出的那样（感谢单挑），我没有想到需要单独对多个元素进行此操作的可能性。他们是对的;上述解决方案不适用于该场景。他们的替代方案有效，但我也希望提供第三种可能性：用this替换jQuery(this).parent()，以便上下文变得更高一级。

从问题编辑中修改过的新小提琴位于：http://jsfiddle.net/GU8Bj/

Answer 2

问题是你试图选择“.meta”作为“.meta2”的后代，而事实并非如此。这一行：

jQuery(".meta", this).fadeIn(400);

表示在this的上下文中选择“.meta”元素 - 在这种情况下是.mouseenter()函数绑定的“.meta2”元素。但“.meta”不是“.meta2”的孩子。您只需删除this上下文，如下所示：

jQuery(".meta").fadeIn(400);

它会像这个更新的小提琴一样工作：http://jsfiddle.net/VFwxN/6/

但是，这会使用“.meta”类在所有元素中淡出。如果您想在具有该类的多个元素的页面上使用它，您应该使用.prev()方法选择紧跟在“.meta2”div之上的div之前的div：

jQuery(this).prev(".meta").fadeIn(400);

演示：http://jsfiddle.net/VFwxN/10/

显然这特别适用于您使用的html结构，其中“.meta2”和“.meta”是兄弟姐妹。

向.prev()提供选择器意味着它只会选择前一个元素（如果它与该选择器匹配）（否则它将不会匹配任何东西 - 它不会继续向前看）。

Answer 3

他可能想要使用“this”，因为会有多个meta2需要这个悬停功能。

我在这里更新了jsfiddle - ＆gt;

http://jsfiddle.net/VFwxN/7/

我重新构建了HTML，以反映您尝试使用JS进行的操作。

问题在于

的jQuery（ “元。”，这）.fadeIn（400）;

正在寻找一个位于'this'中的'meta'类的元素，这是调用该动作的元素。在你的情况下，它是 - ＆gt;

jQuery（“。mas”）。mouseenter（function（）{

更正DOM结构允许您引用meta2范围内的meta。如果您无法重构DOM并且不需要使用“this”来引用mouseover元素，那么您可以使用Rick提供的解决方案。

jquery目标嵌套#div

3 个答案: