Selecting Specific Element Within Class

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()
})

• Ram: @Tats_innit Hey bro, Thanks :), how are you?
• Ram: @Tats_innit haha, me too :)

Answer 2

$('.app').hover(function() {
 var text = $(this).find('.app-text');
 ...
});

or, in CSS3 compatible browsers:

.app:hover .app-text {
 color: red;
}

Answer 3

You can access hovered element with this.

Try something like this:

$('.app').hover(function(){ //function on hover-in
 $('.app-text', this).css('color', 'red');
 }, 
 function(){ //function on hover-out
 $('.app-text', this).css('color', 'black');
 });