Jump to content

:hover for images


mrdennis

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.

Link to comment
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...

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...