Inline CSS hover?
I have a situation where I want to make a simple hover effect with images. I know how to do this with either an external CSS file or a header CSS declaration but for this project I am able to use CSS inline only. Here's the simple code I'm using without a hover effect.
<?php
<a style=\"background-image:url('4242859.jpg')\"></a>
?>So I've got my regular background image but how do I add the hover aspect so it displays a different image on mouseover? Thanks in advance if this can be accomplished.
dk01 posted this at 20:56 — 1st March 2005.
He has: 516 posts
Joined: Mar 2002
Heya,
Its only in working draft stage in the W3C. I tried their implementation and as expected it doesn't work in any browsers yet. Of course JS or id/class CSS would allow you to this, but inline at the moment is limited. So sorry!
See: http://www.w3.org/TR/2002/WD-css-style-attr-20020515#cascading
-dk
fifeclub posted this at 22:26 — 1st March 2005.
He has: 688 posts
Joined: Feb 2001
Very interesting. And confusing. I tried it and as expected it didn't work. So can I do a mouseover image change (doesn't need to be a background) in JavaScript if I still don't have access to the head section?
dk01 posted this at 22:39 — 1st March 2005.
He has: 516 posts
Joined: Mar 2002
Yes its a mess right now with IE not having any CSS updates since like 2001. Basically you can do it by putting this in the tag (not tested):
onmouseover="this.style.backgroundImage = 'url(over.gif);'"
onmouseout="this.style.backgroundImage = 'url(out.gif);'"
-dk
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.