Question

Basically I’m working with a piece of jQuery that I’m using to control an image fade.

This piece of code, first identifies a div class of .fade, then connects a .hover to it.

When .fade is hovered over, an image within a display:none div within the .fade class is slowly faded in bringing opacity back to 1.

It’s a fairly simple piece of code, but I’m wondering if there’s a way to modify it in order to work with multiple classes (ie. fadetwo, fadethree, etc)… because it works off of a div within the parent .fade class it should work right?

I just can’t seem to make it work. I’m trying to add additional classes in this line:

$('div.fade').hover(function()

Like:

$('div.fade, div.fadetwo, div.fadethree').hover(function()

I’m just trying to make so I can have multiple divs (.fade, .fadetwo, etc.) have that same hover effect (obviously each with different images)… I’m not sure if jQuery even works like this.

Possibly there is a better way to do this?… Beneath is my code.

http://jsfiddle.net/yvgFy/

Answer 1

It’s not clear whether you want to select with ALL three classes or with ONE of the three classes. Therefore I explain both possibilites:

Select ALL classes

Write your classes together without spaces and commas, like this:

$('div.fade.fadetwo.fadethree')

this selects only divs with all three classes.

Select ONE of the classes

If you need to select divs with one of the three classes, omit the spaces, like this:

$('div.fade,div.fadetwo,div.fadethree')