How to trigger event only in the element in use - jQuery

Question

IMPORTANT

Solved this problem by modifying my actual code. The simplified code below should work as expected, by my actual code wasn't working since it was made with functions and a different layout, but I now realized I made a silly logic mistake.

---

I tried to find this on google and haven't found and answer, I don't know if I'm not asking google properly, but what I want to achieve is something like this

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>

jQuery:

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

EDITED DETAILS:

I if I move the mouse inside the first div I want to move only the title inside the first div but not the one in the second div, and if I move the mouse inside the second div, move the title inside the second div but not the one inside the first , right now it moves all the titles in the different sections. How can I achieve this? I'm sure this should be very simple, but I haven't been able to figure out how to search for this selector!

Thanks beforehand!

Answer 1

You could grab the first h1 and attach to it an event handler for the mouseenter event, like below (I changed a bit your selector):

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

 $(function(){ $('.animates-whats-inside > h1').first().on('mouseenter', function() { debugger; $(this).animate({ opacity: 0.25, left: "+=50", height: "toggle"}); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Answer 2

Yok可以使用悬停事件。

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

Answer 3

It seems you dont need to do children since h1 is direct decedent of

.animate-whats-inside . You can do like this

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

DEMO

Answer 4

try to select the direct descendent of .animates-whats-inside

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

Answer 5

refer the following code :

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


</script>