Home  |  About  | Last |  Submit  |  Contact
AllQuests.com



Previous Question:  Image in Row?  CSSNext Question:  background: url(...) Not working  CSS
Question using css to change bg of on hover? ( SitePoint Forums CSS )
Updated: 2008-03-05 06:18:56 (16)
using css to change bg of on hover?

Hi everyone...

Since CSS can do just about anything - I'm curious if it is possible to change a cell background color on hover of a link?

I hope you understand...

I have a table with 8 vertical cells with options... each option in its own cell... when i rollover the text link is it possible to change the bgcolor of the cell?

thanks in advance
~nina

Answers: using css to change bg of on hover? ( SitePoint Forums CSS )
using css to change bg of on hover?

that was fast!
now time to play i guess

thank you bunches

~nina

ktown

using css to change bg of on hover?

Nina...

Put this code in your TD:
onMouseOver="this.bgColor = '#F0F0F0'" onMouseOut="this.bgColor = '#FFFFFF'"

Change the colors to whatever you like.

The final code would look like this:
<td onMouseOver="this.bgColor = '#F0F0F0'" onMouseOut="this.bgColor = '#FFFFFF'">

creole

using css to change bg of on hover?

depends on your browser

mozilla (and probably NS6) should let you do this:

in you stylesheet

td.myclass:hover{
background-color:#ff0000
}

them any td with the classname 'myclass' will change to red when hovered over

It doesn't work in IE6 or opera6 on the PC.

If your options are links though you may find this useful:using CSS to create rollovers which might help you re-create what you need.

[edit]
or use creoles suggestion, it'll work but it's not *pure* css

cheers

alastair

19nine78

using css to change bg of on hover?

I was *just* looking for this, and here is a quick and drity version I found:

http://www.bravenet.com/reviews/arch...ps.php?view=83

Granted, it isn't cross-browser compatible (doesn't work in Netscape), so I am still looking for something that works across browser or at least degrades gracefully.

Tim
http://www.fivesevenfive.com

Clampants

using css to change bg of on hover?

for some reason the style sheet way isn't working...

i added it to my stylesheet... saved it.. made sure its linked.

then i went to the cell i want to alter and <td class='myclass'>

did i do something wrong?

~nina

ktown

using css to change bg of on hover?

this should work in both IE and NS
Code:
<style type="text/css"><!--

a:hover {color: #ff0000}

--></style>

<table>

 <tr>

  <td onMouseover="this.style.backgroundColor='yellow'" 
  onMouseout="this.style.backgroundColor='white'">

  <ilayer><layer onMouseover="this.bgColor='yellow'" 
  onMouseout="this.bgColor='white'"><a href="#">Main</a></ilayer></layer></td>
 
 </tr>

</table>

mmi

using css to change bg of on hover?

-= Use SPAN (or DIV) instead of layer.
-= ilayer is not a valid HTML tag and to be honest, neither is layer. They are both put off in favor of a DIV as a container tag.
-= Make sure your tags are nested correctly.

But other than that the code worked great.

creole

using css to change bg of on hover?

thanks creole - how can I change this to get the bgcolor change in N4?
Code:
<style type="text/css"><!--

a:hover {color: #ff0000}

--></style>

<table>

 <tr>

  <td onMouseover="this.style.backgroundColor='yellow'" 
  onMouseout="this.style.backgroundColor='white'">

  <div><span onMouseover="this.bgColor='yellow'" 
  onMouseout="this.bgColor='white'"><a href="#">Main</a></span></div></td>
 
 </tr>

</table>

mmi

using css to change bg of on hover?

Quote:
for some reason the style sheet way isn't working...
What browser???

It only works on mozilla NOT IE6 or OPERA

other than that it should have been OK.

A link to the page and the stylesheet would be helpful

cheers

alastair

19nine78

using css to change bg of on hover?

Quote:
Originally posted by mmi
thanks creole - how can I change this to get the bgcolor change in N4?
You can't. It doesn't work in Netscape.

creole

using css to change bg of on hover?

the first code I put up, despite any shortcomings, works for me in N6 and N4 as far as td bgcolor - of course, the link hover effect is not supported by N4

mmi

using css to change bg of on hover?

Quote:

What browser???
Any browser, for sure not IE5 or any of the netscapes.. i haven't tried it with mozilla.

ktown

using css to change bg of on hover?

alright... i have it working in EI, NS6 & Mozilla.. I know that it doesn't work in NS4.x but what about Opara?

thx.

its all a learning process right

ktown

using css to change bg of on hover?

good luck to anyone attempting to follow this thread

I admit that the original code I put up doesn't validate, but it seems to work everywhere I've looked, inc. Opera - mmy second attempt (in an effort to meet the objections raised by creole) won't work in N4 cuz it probably doesn't support mouse events in span

I lifted that stuff from a very stylish individual, so it can't be as lame as mmy coding efforts

mmi

using css to change bg of on hover?

i got it...

every browser BUT NS 4.x


<td onMouseOver="this.style.backgroundColor = '#FFFFCC'" onMouseOut="this.style.backgroundColor = '#6699CC'" >


for anyone that cares.. Opera and all

~nina

ktown

using css to change bg of on hover?

I don't think N4 supports mouse events in TD's either

validate, schmalidate - I say go with mmy original code!

mmi

Previous Question:  Image in Row?  SitePoint Forums  CSSNext Question:  background: url(...) Not working  SitePoint Forums  CSS

- Source: using css to change bg of
on hover? SitePoint Forums CSS
- Previous Question: Image in Row? SitePoint Forums CSS
- Next Question: background: url(...) Not working SitePoint Forums CSS