CSS Mouse-overs (Jus’ like Woody’s!)

Topic

New Reply

Can someone clear up the code I need to perform a mouse-over using CSS – much like the front page to WOPR? I’m interested in making an entire table cell “light up” by defining something in the style sheet, and then I believe I need to use the onMouseOver and onMouseOut event handlers to pull off this bit ‘o magic?

Any assistance would be greatly appreciated!

Cheers,

Reply | Quote

Replies

I don’t believe you can set this in a style sheet, because onmouseover and onmouseout are EVENTS. Instead, you set each TD individually. The following table contains cells that have red text when the mouse is over them, black when the mouse is not:

Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Hope this helps,

Reply | Quote

Thanks Stan – I believe with the example you have provided that I can make things happen the way I want them to. I can use the handlers to perform the actions I need….a little playing about after all the house is in bed so that I can concentrate should help immensely. What I want to do is to define a style in the stylesheet for table cells – one normal and one ‘highlighted’ in a paler color – and then use the onmouse handlers to pull off the action.

I got this idea from an interesting website that uses CSS to pull off some really neat stuff – http://www.solardreamstudios.com. The webmaster there is using CSS to add transparency to banner ads and the like, which I will *never* use, but the transparency and other effects he’s got are great tools.

Again, mucho gracias for your input. Now all two or three people that look at the homepage can be thrilled to no end!

Reply | Quote

The Lounge code might be this:

// overLIB 3.33 — This notice must remain untouched at all times.
// Copyright Erik Bosrup 1998-2001. All rights reserved.
//
// By Erik Bosrup (erik@bosrup.com). Last modified 2001-01-26.
// Portions by Dan Steinman (dansteinman.com). Additions by other people are
// listed on the overLIB homepage.
//
// Get the latest version at http://www.bosrup.com/web/overlib/

But it’s a guess on my part.

Reply | Quote

Wow, now that is a slick, fast loading little scriptoid right there. Not the highlighting table action that I want but something I will definitely be incorporating!! Thank you for the snippet and the link!

Reply | Quote

Whoops. Here’s the real answer: this goes in your stylesheet or tags.

A:HOVER { 
  color: #bb00ff; 
  font-weight: bold;
  text-decoration: underline;
}

(Adapted from the Lounge’s OldStyle style sheet.)

Reply | Quote

This is the correct answer for links, but the question was what to do with table cells. Am i wrong, or can HOVER only be used with links, and not with other tags?

Reply | Quote

I think you’re right. I was looking at the Lounge code and not focusing on the original original question. In the immortal words of Emily Litella, “Never mind.”

Reply | Quote