Javascript 如何仅在使用中的元素中触发事件-jQuery

重要

通过修改我的实际代码解决了这个问题。下面的简化代码应该可以像预期的那样工作，因为我的实际代码没有工作，因为它是由函数和不同的布局组成的，但是我现在意识到我犯了一个愚蠢的逻辑错误

---

我试着在谷歌上找到这个，但还没有找到答案，我不知道我是否问得不对谷歌，但我想实现的是这样的

$('.animates-whats-inside').on('mouseenter', function() {
      $(this).find('h1').animate({
          opacity: 0.25,
          fontSize: "3em",
          height: "toggle"
        }, 5000)
      });

HTML:

<div class="animates-whats-inside">
    <h1>This title will be animated when you put the cursor on my parent</h1>
</div>
<div class="animates-whats-inside">
    <h1>This title will be animated when you put the cursor on my parent</h1>
</div>

$('.animates-whats-inside').on('mouseenter', function() {
    $(this).children().find('h1').animate(...);
});

编辑的详细信息：

<div class="animates-whats-inside">
    <h1>This title will be animated when you put the cursor on my parent</h1>
</div>
<div class="animates-whats-inside">
    <h1>This title will be animated when you put the cursor on my parent</h1>
</div>

$('.animates-whats-inside').on('mouseenter', function() {
    $(this).children().find('h1').animate(...);
});

如果我在第一个分区内移动鼠标，我只想在第一个分区内移动标题，但不想在第二个分区内移动标题，如果我在第二个分区内移动鼠标，则在第二个分区内移动标题，但不想在第一个分区内移动标题，此时它会移动不同分区中的所有标题。我怎样才能做到这一点？我相信这应该是非常简单的，但我还没有弄清楚如何搜索这个选择器

---

事先谢谢

您可以抓取第一个h1并将mouseenter事件的事件处理程序附加到它，如下所示（我稍微更改了您的选择器）：

$（函数（）{
$（'.animates>h1'）.first（）.on（'mouseenter'，function（））{
调试器；
$（这个）。设置动画（{不透明度：0.25，
左：“+=50”，
高度：“切换”}）；
});
});

当您将光标放在“我的父对象”上时，此标题将设置动画
当您将光标放在“我的父对象”上时，此标题将设置动画
尝试选择
的直系后代。动画显示内部内容

$('.animates-whats-inside').on('mouseenter', function() {
    $(this).find('> h1').animate(...);
});

Yok可以使用悬停事件

$('element').hover(hoverFunction,unhoverFunction);

似乎你不需要做
孩子
，因为
h1
是孩子的直接死者

。制作内部内容的动画
。你可以这样做

$('.animates-whats-inside').on('mouseenter', function() {
      $(this).find('h1').animate({
          opacity: 0.25,
          fontSize: "3em",
          height: "toggle"
        }, 5000)
      });

参考以下代码：

<script type="text/javascript">
    $(document).ready(function(){
        $('.animates-whats-inside').each(function() {
            $(this).on('mouseenter', function() {
                $(this).children().find('h1').css("color","red")
            });
        });
    });


</script>


$（文档）.ready（函数（）{
$（'.animates what in'）。每个（函数（）{
$（this）.on（'mouseenter'，function（）{
$（this.children（）.find（'h1'）.css（“颜色”、“红色”）
});
});
});
你能在一个JSFIDLE/代码段中复制这个行为吗？好吧，就是这样，我意识到，在我的实际代码中，我没有使用$（this）选择器，这就是为什么它选择了该类的所有部分，而不是事件发生的部分！我愚蠢的错误。@JuanBonnett我很高兴我帮了忙：）好吧，就是这样，我意识到，在我的实际代码中，我没有使用$（this）选择器，这就是为什么它选择了该类的所有部分，而不是事件发生的部分！我愚蠢的错误