Jump to content

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


Recommended Posts

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

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>

Link to post
Share on other sites

2 Николай 2357

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

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

Link to post
Share on other sites

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

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

width:100

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

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

Link to post
Share on other sites

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

<...>

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

.menu1 {

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

display: block;

font-size: 14px;

}

<...>

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    47,198
    Total Members
    1,451
    Most Online
    Rawid
    Newest Member
    Rawid
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...