This is almost what I need. But .seriesOverlay is not a child, but
the previous div in the DOM, so it is right above it.
Maybe I could use $(".seriesOverlay + .seriesItem")?
On Jun 26, 2:47 am, "Richard D. Worth" <[EMAIL PROTECTED]> wrote:
> If your .seriesOverlay is a child of your .seriesItem[1], you can do:
>
> $(".seriesItem").mouseover(function() {
> $(".seriesOverlay", this).hide();}).mouseout(function() {
>
> $(".seriesOverlay", this).show();
>
> });
>
> Why this works:
> * The thisArg in jQuery callbacks is always equal to the original element to
> which the event is bound
> * The jQuery function accepts an optional context as the second argument.
> See
>
> http://docs.jquery.com/Core/jQuery#expressioncontext
>
> for more info.
>
> - Richard
>
> Richard D. Worthhttp://rdworth.org/
>
> [1] If you have a different structure, you might have to do something like
> $(this).next(".seriesOverlay"), depending
>
> On Thu, Jun 26, 2008 at 1:02 AM, hubbs <[EMAIL PROTECTED]> wrote:
>
> > I have a listing of items, each of which has a transparent "cover"
> > over each item, but when you mouse over the item, the transparency
> > hides, and shows full color item, then on mouseout the "cover" is
> > added again.
>
> > This works fine if I use IDs, but I want to get away from this, as I
> > am not always sure about how many items I will have, so I don't want
> > to have to keep adding more IDs to my jquery script. How can I use
> > the javascript "this" property, so that I can get away from using IDs,
> > and just have the function happen on the element that the event is
> > happening on?
>
> > Here is what I am using:
>
> > $(".seriesItem").mouseover(function () {
> > $(".seriesOverlay").hide();
> > });
> > $(".seriesItem").mouseout(function () {
> > $(".seriesOverlay").show();
> > });
>
> > How could I incorporate "this" into my script? Or am I going about it
> > the wrong way?
>
> > I wanted to use classes, but obviously it shows and hides ALL items
> > transparent cover.
