CODEWITHSUNDEEP
jqueryjquery-selectors
nixblu
nixblu

Reputation: 89

Selecting Specific Element Within Class

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)

Upvotes: 1

Views: 144

Answers (3)

Ram
Ram

Reputation: 144659

You can use $(selector, context):

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

Upvotes: 3

Alnitak
Alnitak

Reputation: 339776

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

or, in CSS3 compatible browsers:

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

Upvotes: 1

egis
egis

Reputation: 1412

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');
               });

Upvotes: 0

Related Questions