Наведите <a>в <td>изменить <td>фоновое изображение

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 генерируется, поэтому я не уверен, почему они будут использовать один и тот же класс для ссылки и тд.Мне удалось назначить: hover для ссылки, но изменился только фон текста, а не весь <td>

Answer 1

Вы должны отобразить ссылку в виде блока и установить ширину и высоту равными 100%; это заполнит ваш тд с помощью элемента привязки, и каждый пиксель тд будет выступать в качестве ссылки (вы можете нажать на нее). Если это нормально, то вот решение:

.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/ Это работает в любом браузере

Но если вы не хотите заполнять свой тд тегом привязки, тогда вам нужно использовать JavaScript для добавления и удаления классов в td. насколько мне известно, вы не можете иметь td:hover

Answer 2

не могли бы вы просто изменить фон, как это?

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

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

Answer 3

Один из способов сделать это с событием. Присвойте onmouseover тегу <a> для вызова функции, которая затем меняет фон для родителя <td>.

Примечание: в будущем отличный способ сделать это с помощью CSS - селектор: parent, который, к сожалению, в настоящее время не существует .

EDIT: если вы уверены, что <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;
}