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,214
    Total Members
    1,451
    Most Online
    sofia
    Newest Member
    sofia
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • if (!(max <= valueInp + step)) А почему бы не писать это в виде max > valueInp + step? Я бы предложил добавить строку debugger внутрь обработчика клика и посмотреть на значения всех переменных if (!(min >= valueInp - step)) { numberInp.value = (valueInp - step); } else { numberInp.value = min }; А эту штуку можно записать как numberInp.value = Math.max(min, valueInp - step)
    • Представляю вашему вниманию фреймворк управления контентом Revolver.     Работает на PHP, MySQL и ECMAScript 7. Унифицированный интерфейс на View Port единицах и специальный шаблонизатор позволяет быстро и эффективно создавать вебсайты любой сложности под высокие нагрузки с низким требованием к ресурсам хостинга(достаточно компьютера типа Raspbery и 10Mb выделенной оперативной памяти). Трехуровневое кэширование позволяет свободно развивать ваши сайты и сервисы не беспокоясь о высокой стоимости обслуживания сервера. Архитектура Kernel->Model->View прекрасно спланирована и дает перспективы развития проекта на долгие годы.  Revolver CMF великолепно защищен от любых атак и имеет встроенную капчу, которую не смог обойти ни кто. Страница проекта здесь: RevolveR CMF.
    • Ну да: перепутал. А что толку? Вот мы его и выяснили.   Ну да: перепутал. А что толку? Вот мы его и выяснили.   Ну да: перепутал. А что толку? Вот мы его и выяснили.  
  • Popular Contributors

×
×
  • Create New...