Выделение ячейки при наведении

[Rudoy1488]

Господа, делаю меню на основе таблицы. При наведении ячейка должна выделяться. Вроде всё получилось... вот такой код:

Спойлер: html

<style>
.red{background-color: #0025F4;}
.white{background-image:url(image/nonebg.png);}
</style>
<script language='javascript1.3'>
  function active(item)
  {
    str="item.className=\"red\"";
    eval(str);   
  }
  function inactive(item)
  {
    str="item.className=\"white\"";
    eval(str);   
  }

</script>




<div id="cat">
        <table width="200" cellpadding="4px" cellspacing="6px">
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/moykaokon.html">Мойка окон</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/gruz.html">Подъем груза</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/moykafasad.html">Мойка фасадов</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/banner.html">Монтаж баннера</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/derevo.html">Удаление деревьев</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/koshka.html">Снятие кошки с дерева</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/pokraska_kirpichnih_trub.html">Покраска кирпичной трубы</a></td>
 
  </tr>
</table>
<table width="200" cellpadding="4px" cellspacing="6px">
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/moykaokon.html">Мойка окон</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/gruz.html">Подъем груза</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/moykafasad.html">Мойка фасадов</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/banner.html">Монтаж баннера</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/derevo.html">Удаление деревьев</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/koshka.html">Снятие кошки с дерева</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/pokraska_kirpichnih_trub.html">Покраска кирпичной трубы</a></td>
 
  </tr>
</table>
<table width="200" cellpadding="4px" cellspacing="6px">
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/moykaokon.html">Мойка окон</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/gruz.html">Подъем груза</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/moykafasad.html">Мойка фасадов</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/banner.html">Монтаж баннера</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/derevo.html">Удаление деревьев</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/koshka.html">Снятие кошки с дерева</a></td>
 
  </tr>
  <tr>
    <td class=white onmouseover="active(this)" onmouseout="inactive(this)"><a href="http://alpprom.com/pokraska_kirpichnih_trub.html">Покраска кирпичной трубы</a></td>
 
  </tr>
</table>
         
        <div class="clear"></div>
    </div>

Спойлер: css

table {
float: left;
margin-right: 10px;
background-size: 50%;
}



#main #cat a {
display: block;
width: 80%;
color: #fff;
background: url("http://site.com/images/ar.gif") 0 4px no-repeat;
padding: 0 0 0 13px;
border-bottom: 1px solid #fff;
border-bottom-style: dashed;
text-decoration: none;
padding-bottom: 5px;

position: relative;
line-height: 12px;
}

Между таблицами я поставил отступ, но при наведении на ячейку так же выделяется место где должен быть отступ...помогите исправить пожалуйста, скрин прикладываю

Спойлер: Фото

 

[kir9-molodoi]

а можно просто сделать так на css

table tr > td:hover  {
    background: blue;
}

а поддчеркивание так

table tr > td {
    border-bottom:1px dashed #fff;
}

 

[Rudoy1488]

а можно просто сделать так на css

table tr > td:hover  {
    background: blue;
}

а поддчеркивание так

table tr > td {
    border-bottom:1px dashed #fff;
}

Да намного легче, но проблема та же. Не могу понять почему выделяет помимо ячейки ещё и пространство справа

 

[kir9-molodoi]

Да намного легче, но проблема та же. Не могу понять почему выделяет помимо ячейки ещё и пространство справа

можно вашу реализацию в действии посмотреть, т.к. по вашему коду у меня все нормально работает

 

[kir9-molodoi]

смотрите у вас тут установлена длина ссылки #main #cat a в 80% и тут же подчеркивание идет, при том, что у вас ячейка имеет длину 100%, соответственно, соответственно ячейка выделяется, все 100%, а подчеркивание которое только 80% тоже выделяется и дальше )) так что вам надо тут сделать width: 93%;

 

[Rudoy1488]

смотрите у вас тут установлена длина ссылки #main #cat a в 80% и тут же подчеркивание идет, при том, что у вас ячейка имеет длину 100%, соответственно, соответственно ячейка выделяется, все 100%, а подчеркивание которое только 80% тоже выделяется и дальше )) так что вам надо тут сделать width: 93%;

Спасибо вам отгромное. Тема закрыта