2014-01-07 9 views
0

Я пытаюсь, чтобы вся ячейка таблицы была ссылкой, которая меняет цвет фона при наведении.
Это было просто с Javascript, но я не могу заставить это работать.
Теперь я не могу заставить это работать.
Вся ячейка таблицы доступна для просмотра (хорошо), но без изменения цвета (плохо).
Что я делаю неправильно?Заполните ячейку таблицы ссылкой с цветом наведения

<table width=980 height=100 style="margin:10px;"> 
<tr> 
<td align="center" valign="middle" width="20%" height="40" style="vertical-align:middle;border:5px solid #899e7d;"> 
<a class="ClickCell" href="who.php">About Us</a> 
</td> 
</tr> 
</table> 

.ClickCell { 
    color:#cf9654; 
    cursor:hand; 
    display:block; 
    font-size:32px; 
    height:100%; 
    margin: -10em; 
    padding: 10em; 
    text-decoration:none; 
    width:100%; 
} 

.ClickCell:hover { 
    background-repeat: no-repeat; 
    background-position: left; 
} 

.ClickCell:hover a { 
    background-color: #FFFF00; 
} 

ответ

0

Проблема заключается в том, что вы вызываете тег привязки внутри объекта ClickCell. Якорным тегом является объект ClickCell. Вместо этого добавьте класс в ячейку и просто измените ячейку напрямую, потому что тег привязки внутри является встроенным элементом. Например:

td.HoverCell:hover { 
    background-color: red; 
} 

JSFiddle раствора:
http://jsfiddle.net/D2bA3/

+0

Спасибо. Я пробовал это, и он почти работает. Теперь вся ячейка по-прежнему доступна для кликов, но только желтеет, когда я нависаю над фактическим текстом ссылки ... которая составляет только 50% ячейки. –

Смежные вопросы