Multiple hovers?
Multiple hovers?
Here's what I'd like to accomplish:
An image, 750 px wide. In front of that (absolutely positioned), two divs 450 px wide each. Each of the front divs covers one half of the image, plus an extra 75 px to the side. Inside the right-hand div there's a right-arrow image and in the left-hand div there's a left-arrow image; these are not displaying at first. Overall, the whole thing - image plus prev/next arrows - is 900 px wide.
When the mouse rolls over the left half of the 900-px-wide area, I'd like the prev arrow to fade in. If they roll over the right half, the next arrow should fade in. The arrows should fade out if the mouse rolls off the current half (think Lightbox). If they are ALSO over the image, I'd like a "caption" div to animate up. If they roll off the image, the caption should animate down.
I've banged my head against this for a while with no success - anyone have ideas?