Question

I am a beginner with jQuery and I’m struggling a little trying to work this out:

So I have something similar to this:

<div class="app">
<div class="app-text"></div>
</div>

<div class="app">
<div class="app-text"></div>
</div>

I want to use jquery to change the color of .app-text but when using .app-text it will also change the app-text in the other div (obviously) so how would I go about just changing just the .app-text within the .app div that is being hovered on. The event needs to be triggered when hovering on .app div.

(there will be quite a number of .app divs on the same page)

Answer 1

You can use $(selector, context):

$('.app').hover(function(){
   $('.app-text', this).foo()
  }, function(){
   $('.app-text', this).bar()
})