懸停<a>在</a> <td> <a>更改</a> <td> <a>背景圖</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使用相同的類。 我能夠在鏈接上分配：hover，但是僅文本背景更改了整個<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

一種方法是使用事件。 在<a>標記上分配onmouseover來調用一個函數，該函數然后更改父<td>的背景。

旁注：將來，使用CSS的一種好方法是使用：parent選擇器，不幸的是， 目前還不存在 。

編輯：如果您確定<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');}