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

Online · June 15, 2008

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

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>

homm · June 15, 2008

1)

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

Online · June 16, 2008

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

a.menu1 {
display: block;
...
}

2) Точно!

Dimitry Wolotko · June 16, 2008

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

В IE.

Николай 2357 · June 16, 2008

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

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

Online · June 16, 2008

2 Николай 2357

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

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

Николай 2357 · June 16, 2008

Слушайте, а можно для тупых (я) поподробнее?

У меня все работает из Вашего кода как описано...

Николай 2357 · June 16, 2008

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

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

width:100

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

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

Online · June 16, 2008

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

<...>
/* первый уровень */
.menu1 {
width: 100%; /* добавил в этот стиль */
display: block;
font-size: 14px;
}
<...>

Николай 2357 · June 16, 2008

Ну вот и я кому сгодился.

Sign In

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

Question

Online

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

homm

Link to comment

Share on other sites

Online

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

Николай 2357

Link to comment

Share on other sites

Online

Link to comment

Share on other sites

Николай 2357

Link to comment

Share on other sites

Николай 2357

Link to comment

Share on other sites

Online

Link to comment

Share on other sites

Николай 2357

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information