Previous Message
Next Message

Using CSS to generate multiple hover over menu effects!

Sent by Chris Heilmann on 11 August 2004 15:03


> I can get an image to display in the top panel OK by using absolute
> positioning - but only for the first menu option - the lower options
> display
> the image that bit lower....naturally!

Rule of Thumb: you can only show and hide elements via :hover in CSS when
they  are _inside_ the element you are hovering over. If this element is
not positioned, then you can position these elements absolutely. You can
not have several different elements appear and disappear on the same link
though.

So, if you want to position two different images in other sections of the
screen, you need to embed them in the link:

<a href="#" class="one"><img src="foo.gif" class="img1" /><img
src="bar.gif" class="img2" />text</a>

Then you can specify them to be not visible when the link is normal and
positioned in the two locations when someone hovers over the link. If the
images are eye candy only, I'd rather use a script though, as this one
allows you to dynamically change a fixed image, and you are not forced to
add all 10 images (if you have 5 links) to the markup and the document.





-- 
Chris Heilmann
The mighty pen: http://icant.co.uk/
Learn to let go! http://ltlg.icant.co.uk
Binaries: http://www.onlinetools.org/

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: