CSS onMouseover/onMouseout?
Hello. I was just wondering if you can somehow put the onMouseover and onMouseout commands in the CSS script for a page. If so, how (for both table cells and links)?
Another thing, I saw something that said the effects of these two commands could only be viewed in IE and NS (version 4 or 5 for both I think?). How can this be true since I've seen the effects on some pages with version 2.7 (MSNtv)?
Thanks.
Suzanne posted this at 16:21 — 15th December 2002.
She has: 5,507 posts
Joined: Feb 2000
onmouseout and onmouseover are JavaScript attributes, so you'd need to use JSS to control styles with them (JavaScript Style Sheets).
disaster-master posted this at 18:17 — 15th December 2002.
She has: 2,154 posts
Joined: May 2001
fiesty, are you referring to the color change done by css when you place the mouse over a link? (hover)
dk01 posted this at 18:54 — 15th December 2002.
He has: 516 posts
Joined: Mar 2002
JSS? never heard of that one. got any cool examples?
-dk
disaster-master posted this at 19:31 — 15th December 2002.
She has: 2,154 posts
Joined: May 2001
*snicker* *snicker*
I could mean Javascript Style Sheets
Suzanne posted this at 20:41 — 15th December 2002.
She has: 5,507 posts
Joined: Feb 2000
For almost everything you use CSS for, you can use JSS for (and v.v.). JSS is useful for DHTML -- hide and reveal elements.
http://developer.netscape.com/docs/manuals/communicator/dynhtml/jss34.htm
fiesty_01 posted this at 21:29 — 15th December 2002.
He has: 173 posts
Joined: Nov 2002
Yeah, the hover color that changes the color of table cells and links when you move the mouse over it is what I'm talking about. Is it simply just a:hover {color: #ffffff}? That sounds almost too easy. And I've also seen sites through my little version 2.7 that was able to see these hover colors, but I don't know why (I guess I'd like to also know how to make it seen in lower-version browsers as well as the upper versions of IE and NS . . . in the easiest way possible).
I am not talking about the onMouseover effect of placing a message in the bottom window (such as "Hi There!") when you move the mouse over a link.
Busy posted this at 21:47 — 15th December 2002.
He has: 6,151 posts
Joined: May 2001
to change links it's just a:hover {color:#??????;}
to change table cell colour this can be done with CSS but isn't widely supported and can crash older browsers. The easiest and most friendly is the use of two images and use javascript to do it.
fiesty_01 posted this at 00:17 — 16th December 2002.
He has: 173 posts
Joined: Nov 2002
I am actually more interested in changing colors of table cells, but was hoping there'd be an easier way than that (I think?).
Isn't there one short JavaScript command that will let you effect all tables in a site, or do you have to put this command in each separate table?
I do have a hover color of yellow in my site right now, but can't see the color changes in my browser to see if it's working (you can see it if you click on the "www" at the top of this message).
dk01 posted this at 00:17 — 16th December 2002.
He has: 516 posts
Joined: Mar 2002
or you could use the DOM:
Hi
-dk
fiesty_01 posted this at 05:50 — 16th December 2002.
He has: 173 posts
Joined: Nov 2002
Thanks dk01. Yep, I believe that's the one I saw . . . the one that would have to be put in every single on your site (I was actually trying to find a global command where you wouldn't have to type this in every ). I was just wondering if something like the following would work up in the CSS part (and still be compatible with many browsers):
This is what I'm looking for, but I don't know if something like the above would work and still be compatible (???).
Could any of you with access to different browsers tell me if my hover color is working also?
Hey Busy, I'm not totally sure, but I think I'm sort of getting it all to work (you may notice the smaller font sizes, etc.).
Busy posted this at 07:44 — 16th December 2002.
He has: 6,151 posts
Joined: May 2001
onmouseover isnt a part of CSS, if you used what dk01 offered you'd need to place that code in each td cell you want effected
your hover works on the page but you need a add a background color, always use a background color when using pattern backgrounds as the text can be unreadable until the background image loads - in this case your links
fiesty_01 posted this at 09:13 — 16th December 2002.
He has: 173 posts
Joined: Nov 2002
Busy, are you saying that I need to do this?
a:hover {color: #ffff00; background: #??????;}
dk01 posted this at 12:14 — 16th December 2002.
He has: 516 posts
Joined: Mar 2002
I am not sure how many browsers this will work in and it might not be what you want but here is the valid code:
a:hover {color: #ffff00; background-color: #??????;}
-dk
Suzanne posted this at 18:49 — 16th December 2002.
She has: 5,507 posts
Joined: Feb 2000
You can use the pseudo code :hover for td cells...
td:hover {
background-color: #hexhex;
}
That will affect every single td. Support may vary. Use #id if you only want one cell to be affected.
fiesty_01 posted this at 06:02 — 17th December 2002.
He has: 173 posts
Joined: Nov 2002
Thanks Suzanne and dk01.
Renegade posted this at 07:44 — 17th December 2002.
He has: 3,022 posts
Joined: Oct 2002
I tried that a while ago but it never worked for me I wonder what it was that I did wrong... :S
Suzanne posted this at 15:09 — 17th December 2002.
She has: 5,507 posts
Joined: Feb 2000
Post the page and we'll see. Could be just not having the support.
fiesty_01 posted this at 16:52 — 17th December 2002.
He has: 173 posts
Joined: Nov 2002
Please let me know if it works or not and, if not, why. Thanks.
dk01 posted this at 18:56 — 17th December 2002.
He has: 516 posts
Joined: Mar 2002
Link?
-dk
Renegade posted this at 09:37 — 18th December 2002.
He has: 3,022 posts
Joined: Oct 2002
i don't have the page anymore, it was more of a testing page :S
ROB posted this at 00:24 — 25th December 2002.
They have: 447 posts
Joined: Oct 1999
if you want to store all your colors in your style sheet, you could do something like this:
<style type="text/css">
tr.up {
background-color: white;
}
tr.over {
background-color: blue;
}
</style>
<table>
<tr class="up" onmouseover="this.style.className='over';" onmouseout="this.style.className='up';">
<td>blah blah</td>
</tr>
</table>
I *think* that will work, don't have time to test it atm.
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.