html hover effect
- Started
- Last post
- 7 Responses
- orpkoobcam2
Does anyone know how you would achieve this:
I have html page with a dynamic number of thumbnail images. I want a hover effect so that when you rollover one image all the rest fade(css opacity).
How would I do that?
- fugged0
easiest, would be to use jQuery.
assign all of the images you want to fade / trigger fade a single class. use that as your selector for assigning the rollover event, and for selecting which images fade. just remember to exclude the actual image you are rolling over.
- epigraph0
I used hoverintent for something similar.
I wanted a tooltip, which was a child of aa image div, to pop up when i rolled over it's parent. All the tooltips had the same class and all the parents had the same class.
I couldnt figure out the parent/child thing so hoverintent took care of it.
- Boz0
just be careful when you using JQuery because the events will bubble up. So you have to kill the animations on the thumbnails you are excluding.
- Boz0
This is what means.. JQuery has a weird animation behavior as events/animations bubble up as you rollover multiple items.
That's why they introduced:
http://api.jquery.com/stop/This is basically the effect when animation events or animation queue if you will is :
http://bit.ly/j9jOv2
- fugged0
That's genius. I wish I'd thought of that...
http://www.qbn.com/topics/656677…I thought you'd made that statement in reference to the code I'd posted above. That's why I said it made no sense.
- TheBlueOne0
I believe this is the answer you seek in CSS:
- thanks, that's the oneorpkoobcam2
- a css implementation is probably better (unless you need to support ie6).fugged