Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Changing Background Color

Status
Not open for further replies.
eharris

eharris

Programmer
Mar 13, 2001
15
0
0
Is it possible to use CCS's to change the background color of an entire <td></td> by using the background-color parameter with hover?

Example:

A.sidebar:hover{color: #66ccff;
text-decoration:none;
font-weight:bold;
background-color: white;
}

I notice you can't use the class=&quot;sidebar&quot; withing the <td>, as <td class=&quot;sidebar&quot;></td> and have it work. Is there a way?

Thanks
 
Sort by date Sort by votes
You can make the anchor tag do all the work.

display: block

This would make the entire anchor a separate chunk on a line, then -

div.menu a { display: block; width: 150px; margin-top: 4px;}

or something to set this up, then -

div.menu a:hover { font: 12pt Verdana; background-color: #cccccc; text-decoration: none; color: white; ; border: 1px solid black; margin-top: 2px; }

To give it a lovely border effect lol. Can't be bothered re-writing it for background, but I am sure you can work that bit out!
 
Upvote 0 Downvote
Yes, this is a fine solution, and thank you.

If I may ask one more CSS novist question, what is the correct syntax in which to include the display:block tag within the HTML document.

Thanks again.

Ed
 
Upvote 0 Downvote
Just put his code in the heading like this:
Code: 
<style type=&quot;text/css&quot;>
div.menu a { display: block; width: 150px; margin-top: 4px;}
div.menu a:hover { font: 12pt Verdana; background-color: #cccccc; text-decoration: none; color: white; border: 1px solid black; margin-top: 2px; }
</style>
And then specify the div as div class=&quot;menu&quot;

That should be all you have to do...
 
Upvote 0 Downvote
Sorry, because you had quoted CSS, I assumed you were familiar with the syntax. Oops.
 
Upvote 0 Downvote
I'm sorry. I realize this is very clear, but I must still be missing something.

As indicated above I attempted to perform a test by entering:

<style type=&quot;text/css&quot;>
div.menu a { display: block; width: 150px; margin-top: 4px;}
div.menu a:hover { font: 12pt Verdana; background-color: #cccccc; text-decoration: none; color: white; border: 1px solid black; margin-top: 2px; }
</style>

. . .within the heading. Then I placed the code:

<td height=&quot;30&quot;><A href=&quot;&quot; div class=&quot;menu&quot;>Test</a></TD>

. . .within a <TD> cell of the applicable page. However I am getting no results. All other CSS effects continue to work. I would appreciate some direction on what I am missing.

Thanks in advance.

Ed
 
Upvote 0 Downvote
Change the td part to:
Code: 
<td height=&quot;30&quot;><div class=&quot;menu&quot;><a href=&quot;&quot;>Test</a></div></td>
[code]
And it should work...
 
Upvote 0 Downvote
Thank you. All is well now. I suppose there is no way for this effect to work in Navigator 4. It does work in Explorer, and Navigator 6. Though I have noticed that Navagator 6 is so buggy that it is hardly worth designing for.

Thank you all for all your assistance.

Kind Regards,

Ed
 
Upvote 0 Downvote
I think the above method is way more complicated than it needs to be. It also doesn't look quite right when hover cells are mixed with other cells, keeps most of the default behavior of anchors, and the anchor will actually work. The method below works fine in IE 5.5 (that's all I bothered to test it with). It makes the cell background turn gray when you hover over it, and that's ALL it does. The anchor itself does nothing.
Code: 
<HTML>
<HEAD>
<TITLE>Table Cell Hover BG Color Change</TITLE>
<style type=&quot;text/css&quot;>
.tbl2 a { color:#000000; text-decoration: none; border: none; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; }
.tbl2 a:hover { background-color: #cccccc; }
</style>
</HEAD>
<BODY>
<table border=&quot;2&quot; cellspacing=&quot;2&quot;>
<tr>
<td>this is a normal cell</td>
</tr>
<tr>
<td><a href=&quot;javascript:&quot;>this is a normal anchor cell</a></td>
</tr>
<tr>
<td class=&quot;tbl2&quot;><a href=&quot;javascript:&quot;>this is a special anchor &quot;hover&quot; cell</a></td>
</tr>
</table>
</BODY>
</HTML>
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
Upvote 0 Downvote
Note that you can also get rid of the &quot;hand&quot; pointer (in IE 5.5) by including cursor:default; in the &quot;.tbl2 a&quot; style. Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
Upvote 0 Downvote
ts-
Netscape 4 doesn't seem to like your example. I didn't expect the hover color to show up, but it also doesn't show the text as a link. Weird huh? Well, actually, that's not weird...Nothing ever seems to work in Netscape 4.

(It works great in NN6 and IE though)
 
Upvote 0 Downvote
Now you know why I didn't even bother to test it in NS. 9 times out of 10 what I want to do either doesn't work at all in NS or I have to recode most of it to make it work in NS. Why bother? I don't even bother to support NS on my web pages any more.
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
Upvote 0 Downvote
Hello
this is almost another ( and it is another) topic
Tsdragon, I agree with you however if we do design only for IE and Opera how many viewers will click away
for instance many of my customers won't make the dif in between browsers, for them a PC is to be turned on and off
further if the machine is 10 years old and still works why bother?
so now I spend some times in shifting from IE to NN and playing with resolutions
for my own like I will start to use Flash (got to learn first!)then how many will click away?
on another hand some positioning and border and hover etc..
are personna non grata in NN and as mentioned NN 6 is buggy
so shouldn't we try to be in between.
cheers

Henry
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

garcosta
  • Locked
  • Question
CSS Coding for Gradient Color Background for all Platforms
Replies
3
Views
45
1DMF
1DMF
csphard
  • Locked
  • Question
need help with footer h3 background-color. 2
Replies
8
Views
100
vacunita
vacunita
ralphonzo
  • Locked
  • Question
Drupal Gardens - changing contact address 1
Replies
7
Views
55
ralphonzo
ralphonzo
nwo4life
  • Locked
  • Question
Paypal button for multiple prices by Quantity and color
Replies
1
Views
29
ChrisHirst
ChrisHirst
yaknowss
  • Locked
  • Question
Create divs with different background colors
Replies
1
Views
47
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top