Перейти к публикации

Изменение свойства DIV при наведении мыши и IE


Рекомендованные сообщения

Есть вертикальное выпадающее меню (см. код ниже).

1) Как сделать так, чтобы при наведении мыши на пункт у него менялся цвет фона по всей длине и этот пункт был бы ссылкой. В FF и O работает, а в IE6 не совсем - цвет меняется только при наведении на текст.

2) Реализация этого меню в IE6 (в старших не проверял) выдает панель о небезопасном содержимом. Можно ли изменить это меню так, чтобы все работало (желательно валидно) и эта панель не появлялась?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Документация</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="keywords" content="Документация">
<meta name="robots" content="index, all">

<script type="text/javascript">
var id_menu = new Array('sub_menu_1','sub_menu_2');
function allclose() {
for (i=0; i < id_menu.length; i++){
document.getElementById(id_menu[i]).style.display = "none";
}
}
function openMenu(id){
for (i=0; i < id_menu.length; i++){
if (id != id_menu[i]){
document.getElementById(id_menu[i]).style.display = "none";
}
}
if (document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
}
</script>

<style type="text/css">
/* ширина меню */
.menu0 {
width: 220px;
}
/* первый уровень */
.menu1 {
display: block;
font-size: 14px;
}
a.menu1 {
line-height: 100%;
padding-top: 5px;
padding-bottom: 5px;
color: #0e5fd8;
}
a.menu1:link, a.menu1:visited, a.menu1:hover, a.menu1:active {
text-decoration: none;
}
/* второй уровень */
.menu2 {
display: block;
font-size: 12px;
}
a.menu2 {
color: #0e5fd8;
padding-left: 20px;
padding-top: 2px;
padding-bottom: 2px;
}
a.menu2:link, a.menu2:visited, a.menu2:hover, a.menu2:active {
text-decoration: none;
}
</style>

<body onload="allclose()">

<div class="menu0">
<div class="menu1" onMouseOver="this.style.background='#E1F1FF'" onMouseOut="this.style.background='#FFF'">
<a href="#" class="menu1" onClick="openMenu('sub_menu_1'); return(false)">Пункт 1</a>
</div>
<div class="menu2" id="sub_menu_1">
<div><a href="#" class="menu2">Блаблабла 11</a></div>
<div><a href="#" class="menu2">Блаблабла 12</a></div>
<div><a href="#" class="menu2">Блаблабла 13</a></div>
<div><a href="#" class="menu2">Блаблабла 14</a></div>
<div><a href="#" class="menu2">Блаблабла 15</a></div>
</div>

<div class="menu1" onMouseOver="this.style.background='#E1F1FF'" onMouseOut="this.style.background='#FFF'">
<a href="#" class="menu1" onClick="openMenu('sub_menu_2'); return(false)">Пункт 2</a>
</div>
<div class="menu2" id="sub_menu_2">
<div><a href="#" class="menu2">Блаблабла 21</a></div>
<div><a href="#" class="menu2">Блаблабла 22</a></div>
<div><a href="#" class="menu2">Блаблабла 23</a></div>
<div><a href="#" class="menu2">Блаблабла 24</a></div>
<div><a href="#" class="menu2">Блаблабла 25</a></div>
</div>
</div>


</body>
</html>

Ссылка на сообщение
Поделиться на других сайтах

1) Добавил к стилю "дисплей: блок", но не сработало (в FF и О по-прежнему все работает):

a.menu1 {

display: block;

...

}

2) Точно!

Ссылка на сообщение
Поделиться на других сайтах
2) эта панель вознивает для любой страницы с ява-кодом, открытой локально, не с интернета.

В IE.

Ссылка на сообщение
Поделиться на других сайтах

Я тут буклетик делал локальный, тоже такая проблемка была (с панелькой) попробуй

Незнаю, может это извращение, но мне помогло.

Ссылка на сообщение
Поделиться на других сайтах

2 Николай 2357

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

А как быть с 1) вопросом?

Ссылка на сообщение
Поделиться на других сайтах

Простите, кажется понял...

На склько я знаю (может бред) в IE widt у div по умолчанию равен содержимому. Попробуйте

width:100

или сколько там нужно, он начнет по всей длинне реагировать.

По крайней мере у меня получилось.

Ссылка на сообщение
Поделиться на других сайтах

Добавил к стилю элемента div меню указанную строку, заработало во всех 3-х браузерах. Спасибо!

<...>

/* первый уровень */

.menu1 {

width: 100%; /* добавил в этот стиль */

display: block;

font-size: 14px;

}

<...>

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

  • Статистика пользователей

    47 323
    Всего пользователей
    1 451
    Рекорд онлайна
    PoliWik
    Новый пользователь
    PoliWik
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...