VPF::Объединить ряды таблицы в группу с mouseover

zaitsman

Дата 22.2.2008, 11:10 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 22.2.2008
Где: Москва

Репутация: нет
Всего: нет

Есть несколько <tr> Задача - объединить штук пять из них так, чтобы у них была единая зона mouseover и mouseout БЕЗ границ. при использовании <tbody>между рядами происходит mouseout.
Просто при загрузке виден только верхний ряд, а нижние в этом объединении рядов имеют style="display:none;". При наведении мыши на верхний дисплей меняется на ""(показывать), однако скрыть необходимо при выведении мыши из всех рядов(то есть если мышь перемещается/остается над другими (не верхним) рядами, когда они уже были видны - они должны оставаться видны).
Надеюсь, понятно чего я хочу.
Спасибо!

Вопрос стал несколько шире - какой контейнер в принципе позволит двум картинкам иметь единую область onmouseover- c тем чтобы событие mouseout не происходило пока не выйдешь из всего контейнера, а не из 1й из картинок.

Это сообщение отредактировал(а) zaitsman - 22.2.2008, 12:38

bars80080

Дата 22.2.2008, 12:42 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

смею высказать предположение, что идёт построение выпадающего списка меню, (слишком похоже)

в этом случае не надо пользоваться таблицами, а просто списками <ol><li></li><li></li></ol>
где mouseover будет на ol

если же имеется ввиду таблица из нескольких частей...
может лучше тогда сделать несколько идентичных таблиц и mouseover на каждую таблицу

?
опишите задачу конкретней

zaitsman

Дата 22.2.2008, 12:47 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 22.2.2008
Где: Москва

Репутация: нет
Всего: нет

Да, имелось в виду построить эдакую менюшку ;)
эм, а дайте пжалста ссылку на список css свойств тегов ol и li, потому что хочется нафиг всё оформление отменить.
Попробовал с ol - мне тоже не подходит, проблема в том, что пунктов там куча и если они уходят сразу, то выглядит неаппетитно, поэтому я их сворачиваю через settimeout(пункт.display="none",900), и почему-то в этом случае вся функция сворачивания начинает срабатывать при mouseout событии(на самом деле понятно почему - если тайм-аута нет, то браузер мгновенно скрывает-раскрывает, а с тайм-аутом происходит остановка обработки js событий, мышь за это время уползает ниже, и когда происходит считывание событий, то браузер спокойно думает, что аут произошел ;))
Нашел некий код, который по идее должен помочь определять в диве откуда пришла мышь - снаружи или изнутри, но он немного сложен для моего восприятия, сейчас разбераюсь.
PS если еще идеи будут - с радостью выслушаю.

Это сообщение отредактировал(а) zaitsman - 22.2.2008, 12:54

bars80080

Дата 22.2.2008, 13:32 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml " lang="en" xml:lang="en">
<head>
  <title></title>
  <meta http-equiv="Content-type" content="text/html; charset=windows-1251" />
  <meta http-equiv="Content-Language" content="ru-ru" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <link href="" media="screen" rel="stylesheet" type="text/css" />
  <link href="" media="print" rel="stylesheet" type="text/css" />
<style type="text/css">/*<![CDATA[*/
body { font-family: verdana, arial, sans-serif; font-size: 100%; behavior:url(csshover.htc); }
* { margin:0; padding:0; }
body div#listmenu ul li ul { display: none; }
body div#listmenu ul li ul li ul { visibility: hidden; top: -1px; left: 10em; }
div#listmenu { width: 100%;  
    float: left;
    border-top: 1px solid #006699;
    border-bottom: 1px solid #006699;
    font-family: "Arial narrow";
    font-size: .8em;
    background-color: #ccccff;
    margin-top: 20px; }
div#listmenu ul { margin: 0 0 0 0px; }
div#listmenu li { float: left; width: 10em; height: 16px;
    position: relative;
    list-style-type: none; 
    background-color: #ffffaa;
    border-right: 1px solid #006699; }
div#listmenu li:first-child { border-left: 1px solid #006699; }
div#listmenu li:hover { background-color: #ffffff; }
div#listmenu li:hover ul, div#listmenu ul li ul:hover { display: block; }
div#listmenu a { display: block; padding: 0 6px; text-decoration: none; color: #006699; /*background: url(00fon02.png); */
    background-position: 0px 0px; }
/*div#listmenu a:link { background-position: 0px 0px; } */
/*div#listmenu a:visited { background-position: 0px -17px; } */
div#listmenu a:hover { color: #ff3333; /*background-position: 0px -34px;*/ }
/*div#listmenu a:active { background-position: 0px -51px; } */
div#listmenu ul li ul { margin 0; position: absolute; width: 100%; left: -1px; }
div#listmenu ul li ul li { width: 100%;
    border-left: 1px solid #006699;
    border-bottom: 1px solid #006699;
    border-right: 1px solid #006699; }
div#listmenu ul li ul li:first-child { border-top: 1px solid #006699; }
div#listmenu ul li ul li:hover ul { visibility: visible; }
div#listmenu ul li ul li:hover ul li ul { visibility: hidden; }
div#listmenu ul li ul li ul li:hover ul { visibility: visible; }
* html div#listmenu ul { float: left;
    border-left: 1px solid #006699;
    margin-left: 0px; }
* html div#listmenu ul li ul { width: 0px; margin-left: 0px; border-top: 1px solid #006699; border-left: 0px;  }
* html div#listmenu ul li ul li { width: 10em; }

 
       
/*]]>*/</style>
  <script src="" type="text/javascript"></script>
</head>
<body>
  <!-HTML Code->
<div id="listmenu">
  <ul>
  <li><a href="#a1">А Первый</a>
    <ul>
    <li><a href="#a1-1">А Первый 1</a><ul></ul></li>
    <li><a href="#a1-2">А Первый 2</a><ul></ul></li>
    <li><a href="#a1-3">А Первый 3</a>
      <ul>
      <li><a href="#a1-1-1">А Первый 1-1</a><ul></ul></li>
      <li><a href="#a1-1-2">А Первый 1-2</a><ul></ul></li>
      <li><a href="#a1-1-3">А Первый 1-3</a>
        <ul>
        <li><a href="#a1-1-3-1">А Первый 1-3-1</a><ul></ul></li>
        <li><a href="#a1-1-3-2">А Первый 1-3-2</a><ul></ul></li>
        <li><a href="#a1-1-3-3">А Первый 1-3-3</a><ul></ul></li>
        <li><a href="#a1-1-3-4">А Первый 1-3-4</a><ul></ul></li>
        </ul></li>
      <li><a href="#a1-1-4">А Первый 1-4</a><ul></ul></li>
      </ul></li>
    <li><a href="#a1-4">А Первый 4</a><ul></ul></li>
    </ul></li>
  <li><a href="#a2">А Второй</a>
    <ul>
    <li><a href="#a1-1">А Второй 1</a><ul></ul></li>
    <li><a href="#a1-2">А Второй 2</a><ul></ul></li>
    <li><a href="#a1-3">А Второй 3</a><ul></ul></li>
    <li><a href="#a1-4">А Второй 4</a><ul></ul></li>
    </ul></li>
  <li><a href="#a3">А третий</a><ul></ul></li>
  <li><a href="#a4">А четвёртый</a><ul></ul></li>
  <li><a href="#a5">А пятый</a><ul></ul></li>
  </ul>
</div>
continue:  
</body></html>

это типа чисто css решение, приатаченный скрипт подрабатывает в ИЕ
правда это для выпадающих менюшек, а не выезжающих

Присоединённый файл ( Кол-во скачиваний: 5 )

csshover.rar 1,00 Kb

zaitsman

Дата 22.2.2008, 14:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 22.2.2008
Где: Москва

Репутация: нет
Всего: нет

А можно для тупых вырезать лишнее? всё, что не относится к реализации удержания на экране подменю.
а то тут же еще и оформление, и сброс стилей (вроде?) в начале...

Вроде бы, куча событий mouseout внутри контейнера при движении по нескольким элементам является свойством бабблинга, я попробовал его выключить, но пока чего-то не вышло :(

Это сообщение отредактировал(а) zaitsman - 22.2.2008, 15:39

bars80080

Дата 22.2.2008, 14:41 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

это вроде минимальный вариант

Код


<style type="text/css">/*<![CDATA[*/
body { behavior:url(css/csshover.htc); }
body div#fthead3 ul li ul { display: none; }
body div#fthead3 ul li ul li ul { visibility: hidden; top: -1px; left: 10em; }
div#fthead3 { position: absolute; left: 100px; top: 100px; float: left; border: solid 4px #008000; }
div#fthead3 ul { margin: 0 0 0 0px; }
div#fthead3 li { float: left; width: 10em; height: 16px; position: relative; list-style-type: none; 
    background-color: #ffffff; border-left: 1px solid #000088; }
div#fthead3 li:hover { background-color: #ffffff; }
div#fthead3 li:hover ul, div#fthead3 ul li ul:hover { display: block; }
div#fthead3 a { display: block; padding: 0 6px; text-decoration: none; color: #000088; }
div#fthead3 a:hover { color: #ff0000; }
div#fthead3 ul li ul { margin 0; position: absolute; width: 100%; left: -1px; }
div#fthead3 ul li ul li { width: 100%;  border-left: 0px; border-bottom: 1px solid #000088; background: #eeeeff; }
* html div#fthead3 ul { float: left; margin-left: 0px; }
* html div#fthead3 ul li ul { width: 0px; margin-left: 0px; border-top: 1px solid #000088; border-left: 0px;  }
* html div#fthead3 ul li ul li { width: 10em; }
/*]]>*/</style>
<div id="fthead3">
  <ul>
  <li><a href="#a1">Авиабилеты</a>
    <ul>
    <li><a href="#a1-1">А Первый 1</a><ul></ul></li>
    <li><a href="#a1-2">А Первый 2</a><ul></ul></li>
    <li><a href="#a1-3">А Первый 3</a><ul></ul></li>
    <li><a href="#a1-4">А Первый 4</a><ul></ul></li>
    </ul></li>
  <li><a href="#a2">А Второй</a>
    <ul>
    <li><a href="#a1-1">А Второй 1</a><ul></ul></li>
    <li><a href="#a1-2">А Второй 2</a><ul></ul></li>
    <li><a href="#a1-3">А Второй 3</a><ul></ul></li>
    <li><a href="#a1-4">А Второй 4</a><ul></ul></li>
    </ul></li>
  <li><a href="#a3">А третий</a><ul></ul></li>
  <li><a href="#a4">А четвёртый</a><ul></ul></li>
  <li><a href="#a5">А пятый</a><ul></ul></li>
  </ul>
</div>
continue:

Добавлено через 1 минуту и 1 секунду
я не говорю, что он лучший, но он работает без задней мысли во всех браузерах, и отображается одинаково

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »