Question

我正在尝试在整个单元格上创建一个悬停。我希望单元格和文本在悬停时改变颜色。我已成功更改文本颜色，但整个单元格不会改变颜色。我认为匹配th th的填充和a：hover会起作用，但事实并非如此。任何帮助，将不胜感激。谢谢。

<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;

}

Answer 1

这是正确的方法。

Fiddle

<强> CSS

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

Answer 2

试试这个：

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

Working Example

希望这有帮助。

Answer 3

你的意思是这样吗？

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;

}

徘徊不在整个细胞上工作

3 个答案:

Fiddle