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

Тема в разделе "Верстка", создана пользователем Rudoy1488, 4 июл 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. Rudoy1488

    Rudoy1488 Постоялец

    Регистр.:
    29 июл 2013
    Сообщения:
    105
    Симпатии:
    46
    Безымянный.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
     
    Последнее редактирование: 4 июл 2014
  2. kir9-molodoi

    kir9-molodoi

    Регистр.:
    31 май 2014
    Сообщения:
    250
    Симпатии:
    78
    а можно просто сделать так на css
    Код:
    table tr > td:hover  {
        background: blue;
    }
    
    а поддчеркивание так
    Код:
    table tr > td {
        border-bottom:1px dashed #fff;
    }
     
    Последнее редактирование: 4 июл 2014
    Rudoy1488 нравится это.
  3. Rudoy1488

    Rudoy1488 Постоялец

    Регистр.:
    29 июл 2013
    Сообщения:
    105
    Симпатии:
    46
    Да намного легче, но проблема та же. Не могу понять почему выделяет помимо ячейки ещё и пространство справа
     
  4. kir9-molodoi

    kir9-molodoi

    Регистр.:
    31 май 2014
    Сообщения:
    250
    Симпатии:
    78
    можно вашу реализацию в действии посмотреть, т.к. по вашему коду у меня все нормально работает
     
    Rudoy1488 нравится это.
  5. kir9-molodoi

    kir9-molodoi

    Регистр.:
    31 май 2014
    Сообщения:
    250
    Симпатии:
    78
    смотрите у вас тут установлена длина ссылки #main #cat a в 80% и тут же подчеркивание идет, при том, что у вас ячейка имеет длину 100%, соответственно, соответственно ячейка выделяется, все 100%, а подчеркивание которое только 80% тоже выделяется и дальше )) так что вам надо тут сделать width: 93%;
     
    Rudoy1488 нравится это.
  6. Rudoy1488

    Rudoy1488 Постоялец

    Регистр.:
    29 июл 2013
    Сообщения:
    105
    Симпатии:
    46
    Спасибо вам отгромное. Тема закрыта
     
Статус темы:
Закрыта.