View Full Version : :hover CSS for image element

02-22-2004, 02:31 PM
Hi , if you look at this in Moz... http://www.firepages.org/ch/
when you mouseover the images the border changes colour...

In IE(6) this does not happen , is this something that IE can't do or am I just doing it totally backwards ?

the CSS I use is ...

.fpa_ex_t_img{width:50;height:50;border:solid 1px black;float:left;margin-bottom:10px;margin:5px;}
.fpa_ex_t_img:hover{width:50;height:50;border:solid 1px gold;float:left;margin-bottom:10px;margin:5px;}

if it can't be done via CSS do you have any javascript alternatives/common workarounds ?

Also , I want (on another similar page) to set the border-color of the image inline (as its dynamically generated [I dont want to rebuild the css file on every request]) , when I do that the :hover above does not work in mozilla nor IE ... can I set :hover inline and if so how ?

cheers !

02-22-2004, 02:47 PM
Remember: IE can't handle :hover on anything other than <a> tags. See this (http://annevankesteren.nl/archives/2004/01/selectorhover-in-internet-explorer) for a possible solution.

02-22-2004, 03:26 PM
Remember: IE can't handle :hover

I could not remember cos I did not know :D , the last time I thought/bothered about presentation was when hover was IE only ! so I was kinda shocked to see it work in Moz but not IE ~

anyway your link has my first issue sorted !cheers!

any ideas about the second ? putting hover inline ? or forcing overwriting an inline style for hover ?

02-22-2004, 04:00 PM
Originally posted by firepages
any ideas about the second ? putting hover inline ? or forcing overwriting an inline style for hover ? You can (http://www.w3.org/TR/css-style-attr#cascading) put hover inline styles, but you shouldn't use inline styles at all (mixing of content and style). How are you dynamically generating this image? Are you writing the actual <img/> tag code? If so, add a class to it and define this class in the CSS document.

02-22-2004, 04:39 PM
cheers again dude , that link fixed me up .. I always get frustrated trying to find what I want on that site ~

I know that stricktly speaking , I `should not` be using inline styles , however the thumbnail images in question [not the ones in htat sample page] are created dynamically and require a border colour that is decided at runtime , this means that I could parse the css file as PHP , and add the appropriate styles there , this however gives me caching issues plus defeats the point of having a cached stylesheet in the first place.

By putting the style inline I get no stylesheet caching issues & it simply works (well it does now cheers!)

02-22-2004, 05:55 PM

Ah, for CSS variables set on the fly...

Maybe one day.