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. Worth
http://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.
>
