Jump to content
Sign in to follow this  
mrdennis

:hover for images

Recommended Posts

Okay, I have a really cool idea that will showcase the different types of results this software package can create.To do this I want to have a base image of a casting, and then display different results over certain sections of this casting.I created this code which seems so dangerously close to being correct. It just looks crazy when the backgrounds are fighting each other. I am worried that the way I am going about this is all wrong.The CSS:.dropdown { position: absolute; width: 1000px; height: 200px; top: 200px; background: #eee; z-index: 1; }.dropdown ul{ margin: 0; list-style: none; padding: 0; z-index: 2; } .dropdown li{ display: inline; position: absolute; overflow: show; margin: 0 2px 0 0; padding: 0; top: -100px; width: 200px; z-index: 2; } .dropdown li:hover{ position: absolute; top: 0px; height: 200px; padding: 0; background: #d10000; color: #d10000; z-index: 2; }The HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>drop down</title><link href="drop.css" rel="stylesheet" type="text/css"/> <body><div class="dropdown"><ul><li>Fluid Flow</li><li style="left: 200px;">Porosity</li><li style="left: 400px;">Strength</li><li style="left: 600px;">Thermal/Solidification</li><li style="left: 800px;">Automatic Meshing</li></ul></div></body></html>The blocks of color will eventually(i hope) images of a casting. When you hover over a particular word, which will also be a link, it will display a different image where it is now red. I don't know if looks crazy to other people, but when i look at it in firefox 2-- it flashes red and grey very quickly, and the words my mouse hovers over do too.

Share this post


Link to post
Share on other sites

The hover effect your using is ..shall we say.. dodgy. When you hover over it, it changes the position of the '<li>' element which changes the position of your text. So when you hovered over the text, it would change its style and position, but because you changed the position, the text is no longer being hovered over, its down there in the top left corner of the respective box. Now because it is no longer being hovered over it switches back to its normal state which is grey not red, and the text where your mouse was. Which is then in a :hover state etc. and it keeps going, which gives it the flicker effect. (at least in Firefox.)I think what your looking for is something like this:This is just plain text popups: http://meyerweb/css/edge/popups/demo.htmThis one has images instead: http://meyerweb/css/edge/popups/demo2.htmShould be easy enough to adapt to your situation, and if you use links, like in the demo, then it also works in IE. at least eric meyer's does...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...