Jump to content
  • 0

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


Online
 Share

Question

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

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 comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

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

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

width:100

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

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

Link to comment
Share on other sites

  • 0

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

<...>

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

.menu1 {

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

display: block;

font-size: 14px;

}

<...>

Link to comment
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
Answer this question...

×   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.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy