Solved

html, css, javascript, and jquery

Posted on 2014-01-16
4
321 Views
Last Modified: 2014-02-05
a.black:hover,a.black:active
{
    color:white;
    background:black
}

 <table width="100%" cellpadding="2" cellspacing="0">
           <tr><td class="leftNavFormat"><a class="black"  href="Default.aspx">Home</a></td></tr>
 </table>

I have above codes working fine. It highlights the text in black. But now I want to hightlights all background colors within
<td></td>. How can do that?
0
Comment
Question by:CoolDev2014
  • 2
4 Comments
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39786486
Do you have a test page that you are working on that might contain the rest of your CSS?
Are you trying to make the black background colour that shows on the hover state fill the entire td that is wrap around your link?
Try
a.black:hover,a.black:active
{
    color:white; 
    background:black;
	display:block
}

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39786533
td a:hover,td a:active
{
    color:white;
    background:black
}
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39791352
There is no 'parent' selector in CSS, so you can't target the TD tag when you hover over the A tag (not with CSS anyway - you could it with jQuery!)

Neil's on the right track - you will need to make the A tag fill the TD and then your CSS hover code will highlight the A tag, filling the TD :)

You may want to style the A tag to display:block in it's default state, rather than just on hover and active otherwise you may have some 'jumps' when you hover.
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39791756
Spot on Chris.
Again, a test page showing us the css you have used for your table will help us a a lot.
Neil
0

Featured Post

ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
URGENT - Wordpress site missing  theme 9 41
How to make footer stick to bottom 9 31
Center div containing a script 6 17
how can i get 4 nd 5 ? 3 13
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question