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

Статус
В этой теме нельзя размещать новые ответы.

Rudoy1488

Постоялец
Регистрация
29 Июл 2013
Сообщения
135
Реакции
65
Безымянный.JPG Господа, делаю меню на основе таблицы. При наведении ячейка должна выделяться. Вроде всё получилось... вот такой код:

Код:
<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>


Код:
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;
}


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


Безымянный.JPG
 
Последнее редактирование:
а можно просто сделать так на css
Код:
table tr > td:hover  {
    background: blue;
}

а поддчеркивание так
Код:
table tr > td {
    border-bottom:1px dashed #fff;
}
 
Последнее редактирование:
а можно просто сделать так на css
Код:
table tr > td:hover  {
    background: blue;
}

а поддчеркивание так
Код:
table tr > td {
    border-bottom:1px dashed #fff;
}
Да намного легче, но проблема та же. Не могу понять почему выделяет помимо ячейки ещё и пространство справа
 
Да намного легче, но проблема та же. Не могу понять почему выделяет помимо ячейки ещё и пространство справа
можно вашу реализацию в действии посмотреть, т.к. по вашему коду у меня все нормально работает
 
смотрите у вас тут установлена длина ссылки #main #cat a в 80% и тут же подчеркивание идет, при том, что у вас ячейка имеет длину 100%, соответственно, соответственно ячейка выделяется, все 100%, а подчеркивание которое только 80% тоже выделяется и дальше )) так что вам надо тут сделать width: 93%;
 
смотрите у вас тут установлена длина ссылки #main #cat a в 80% и тут же подчеркивание идет, при том, что у вас ячейка имеет длину 100%, соответственно, соответственно ячейка выделяется, все 100%, а подчеркивание которое только 80% тоже выделяется и дальше )) так что вам надо тут сделать width: 93%;
Спасибо вам отгромное. Тема закрыта
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху