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

Answer 2

执行此操作的一种方法是使用事件。在onmouseover标记上分配<a>以调用一个函数，然后更改父<td>的背景。

附注：将来，使用CSS执行此操作的一个好方法是使用：父选择器，不幸的是，does not currently exist。

编辑：如果您确定<td>只会包含锚标记，您可以将：hover应用于<td>。然后改变背景是没有问题的。

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

和...

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

Answer 3

你能不能像这样改变a的背景？

a.menuBarBottomUnselected {background-image: url('/auth/radius/submenu_bg.jpg'); }

a.menuBarBottomUnselected:hover {background-image: url('/auth/radius/submenu_bg_hover.jpg');}

悬停<a> in change background image</a>

3 个答案: