Question

I’m currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I’m using WordPress Jquery + Jquery Color Animations plugin.

The Structure:

I use a div (class=”post”) as a container for the wordpress post, and within the “post” div, I have a span (class=”title”) which I use to display the title of the post.

What I want to do is:

1. when the user hovers over “post” div:

   “.title” spans’s background color fades from black to red.

2. when the user hovers out (OnMouserOut) “post” div:

   “.title” spans’s background color fades back to black.

The Code

$j(document).ready(function(){
    $j(".posts").hover(function(){
    $j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
    },function(){
    $j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
    });
    });

The Problem

The code works, except when the user hovers over any “post” div, all “title” span change color. So my question is, how do I target the code to address ONLY the “title” span in the “post” div that is in hover state?

Any help would be greatly appreciated,

Cheers,

Drew.

Answer 1

You need to get the “title” span element that is a descendant of the currently hovered “post”:

$j(document).ready(function(){
  $j(".posts").hover(function(){
    $j(".title", this).animate({ backgroundColor: "#FF0062" }, 300);
    // or $j(this).find(".title")
  },function(){
    $j(".title", this).animate({ backgroundColor: "#231F20" }, 300);
  });
});

The this keyword inside the two even handler functions, refer to the currently hovered “post” element.

I use the context argument of the jQuery function, which is exactly the same as using the Traversing/find method.