Question

我（我相信）一个非常简单的问题，但无法弄清楚出了什么问题。代码将告诉所有内容：

$(".all-products h3").mouseenter(function () {
    $(this).siblings('p').slideDown(200);
}).mouseleave(function () {
    $(this).siblings('p').slideUp(500);
});

这是html：

<a title="xxx" href="#">
    <img src="1.jpg"/>
    <p>description</p>
    <h3>header3</h3>
</a>

这个工作正常，但是为什么当我在jquery中用h替换h3时它不起作用，所以在这种方式下不起作用：

$(".all-products a").mouseenter(function () {
    $(this).siblings('p').slideDown(200);
}).mouseleave(function () {
    $(this).siblings('p').slideUp(500);
});

Answer 1

a不是p的兄弟，它是p的父级。请尝试使用.children('p')或.find('p')（前者更具体）。

Answer 2

$(".all-products a").mouseenter(function () {
    $(this).find('p').slideDown(200);
}).mouseleave(function () {
    $(this).find('p').slideUp(500);
});

a的兄弟姐妹会在DOM中的同一级别存在。在你的情况下，你想要.find（）元素或调用children（）。无论哪种方式。

Answer 3

因为你正在使用兄弟姐妹。

试试这个：

$(".all-products a").mouseenter(function(){
          $('p', this).slideDown(200);
           }).mouseleave(function() {
          $('p', this).slideUp(500);
        });

Answer 4

好吧，似乎主要的问题是p元素不是a的兄弟。您需要将siblings()替换为children()

jquery mouseenter对'a'元素不起作用，在h3上工作正常

4 个答案: