将<a>更改为<td>背景图片中的<a>

Question

我想改变<TD>用户<a>在其中悬停链接时的背景<td>

我的部分HTML:

<tr class="menuBarBottomSelected">
<td width="20%">
<a class="menuBarBottomUnselected" href="./url.php">Getting&nbsp;Started</a>
</td>
</tr>

这是我的css:

.menuBarBottomSelected{
    background-image: url('/auth/radius/submenu_bg.jpg');
    background-repeat: repeat-x;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    color : #ffffff;
    border-top:#666666 solid 1px;
}

tr.menuBarBottomUnselected td a:hover{
    color:black;    
    background-image: url('/auth/radius/submenu_bg_hover.jpg');
    background-repeat: repeat-x;}

html正在生成,所以我不确定为什么他们会为链接和td使用相同的类.我能够在链接上分配:悬停,但只有文本的背景改变而不是整体<td>

Answer 1

您应该将链接显示为块并将宽度和高度设置为100%; 这将使用锚元素填充你的td,并且td的每个像素都将充当链接(你可以点击它).如果那很好,那么这里是解决方案:

.menuBarBottomSelected td a{
    display:block;
    width:100%;
    height:100%;
    background-image: url('/auth/radius/submenu_bg.jpg');
    background-repeat: repeat-x;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    color : #ffffff;
    border-top:#666666 solid 1px;
}

tr.menuBarBottomUnselected td a:hover{
    color:black;    
    background-image: url('/auth/radius/submenu_bg_hover.jpg');
    background-repeat: repeat-x;}

请看这里的示例:http://jsfiddle.net/mohsen/LnabQ/ 这适用于任何浏览器

但是如果你不想用你的锚标签填充你的td,那么你需要使用JavaScript来添加和删除类td.据我所知,你不能拥有td:hover