Question

I have multile li tags (Around 24) – and within them, is an image, and a p tag…

My quetion is…

If I hover over the li e.g. the li itself, the image within or the p…how can I add a class to the p tag?

<li>
<img src="" alt="" />
<p>sometexthere</p>

and then when I hover over any of those elements of that li, the p get’s a class added to it e.g.

<li>
<img src="" alt="" />
<p class="newclass">sometexthere</p>

Note: That it can only be applied to the current li’s p not make the change to all the p’s within all 24 li’s… – Just the current hovered block.

Basically i’m looking just to change the background of the p…so a bonus would to be able to switch class, but with a fade effect (If possible?)

Answer 1

$('li').hover(function() {
  $('p', this).toggleClass('new-class');
});