CODEWITHSUNDEEP
htmlcss
user2647913
user2647913

Reputation: 33

th hover not working on entire cell

I am attempting to create a hover over an entire cell. I would like the cell and text to change color on the hover. I have succeeded changing the text color, however the entire cell does not change color. I thought that matching the padding on the th with the th a:hover would work, but it did not. Any help would be appreciated. Thank you. 

<table>
<tr>
<th><a href="#">Lawn &amp; Garden</a></th>                
<th><a href="#">Hardware &amp; Tools</a></th> 
</tr>
</table>

table {
padding: 0 20px 0 30px;
border-collapse:separate; 
border-spacing:1em;
table-layout:fixed;
width: 30em;

}

table th {
padding: 20px 15px;
font-size: 1.25em;
font-weight:bold;
text-align:center;
color:#336799;
background-color:#ECC442;
}

table th a:link{
font-weight:bold;
text-align:center;
color:#336799;

}

table th a:hover{
padding: 20px 15px;
font-weight:bold;
text-align:center;
color:#669ACC;
text-decoration: none;
background:#F5D671;

}

Upvotes: 1

Views: 81

Answers (3)

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

This is the proper way to do it.

Fiddle

CSS

table th:hover {
    background:#F5D671;
}
table th:hover a {
    font-weight:bold;
    text-align:center;
    color:#669ACC;
    text-decoration: none;
}

Upvotes: 2

Ansyori
Ansyori

Reputation: 2835

you mean like this?

jsfiddle

css:

table {
padding: 0 20px 0 30px;
border-collapse:separate; 
border-spacing:1em;
table-layout:fixed;
width: 30em;

}

table th {
padding: 20px 15px;
font-size: 1.25em;
font-weight:bold;
text-align:center;
color:#336799;
background-color:#ECC442;
}
table th a{
padding: 20px 15px;
    text-decoration: none;
        display:block;
}
table th a:link{
    padding: 20px 15px;
font-weight:bold;
text-align:center;
color:#336799;

}

table th a:hover{
padding: 20px 15px;
font-weight:bold;
text-align:center;
color:#669ACC;
text-decoration: none;
background:#F5D671;
    display:block;

}

Upvotes: 0

Jatin
Jatin

Reputation: 3089

Try this:

table th:hover
{
   background-color:blue;
}

Working Example

Hope this helps.

Upvotes: 0

Related Questions