Не исчезает подменю когда убираешь мышь со строки меню - HTML и CSS

Zopokabra · 09.09.2016, 19:23

Подскажите пожалуйста добрые люди. Хочется понять почему выпадающее меню не исчезает когда мышь уводишь с пункта меню..
HTML
<html>
<head>
<title>CSS слои</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>

<div id="menu">
<a href="#" onMouseOver="books();">Книги</a>
<a href="#" onMouseOver="movies();">Фильмы</a>
<a href="#" onMouseOver="musiks();">Музыка</a>
<a href="#" onMouseOver="games();">Игры</a>
</div>
<div id="book">
<a href="#">Детективы</a>
<a href="#">Классика</a>
<a href="#">Фантастика</a>
<a href="#">Учебники</a>
</div>
<div id="movie">
<a href="#">Детективы</a>
<a href="#">Драмы</a>
<a href="#">Комедии</a>
<a href="#">Сериалы</a>
</div>
<div id="music">
<a href="#">Блюз</a>
<a href="#">Джаз</a>
<a href="#">Джангл</a>
<a href="#">Рок</a>
</div>
<div id="game">
<a href="#">Азартные</a>
<a href="#">Логические</a>
<a href="#">Развлекательные</a>
<a href="#">Компьютерные</a>
</div>

</body>
</html>

CSS
#menu {
background-color: yellow;
border: 1px red solid;
width: 150px;
height: 100px;
margin-top: 10px;
}
a {
text-decoration: none;
display: block;
color: black;
}
a:hover {
color: blue;
text-decoration: underline;
display: block;
}
#book, #movie, #music, #game {
background-color: yellow;
border: 1px red solid;
width: 150px;
height: 100px;
position: absolute;
top: 10px;
left: 150px;
visibility: hidden;
}
#book a, #movie a, #music a, #game a {
text-decoration: none;
color: red;
}
#book a:hover, #movie a:hover, #music a:hover, #game a:hover {
text-decoration: underline;
color: pink;
}
#book{
z-index: 1;
}
#movie{
z-index: 2;
}
#music{
z-index: 3;
}
#game{
z-index: 4;
}

JS
function books(){
document.getElementById("book").sty le.visibility='visible';
document.getElementById("movie").st yle.visibility='hidden';
document.getElementById("music").st yle.visibility='hidden';
document.getElementById("game").sty le.visibility='hidden';
}
function movies(){
document.getElementById("book").sty le.visibility='hidden';
document.getElementById("movie").st yle.visibility='visible';
document.getElementById("music").st yle.visibility='hidden';
document.getElementById("game").sty le.visibility='hidden';
}
function musiks(){
document.getElementById("book").sty le.visibility='hidden';
document.getElementById("movie").st yle.visibility='hidden';
document.getElementById("music").st yle.visibility='visible';
document.getElementById("game").sty le.visibility='hidden';
}
function games(){
document.getElementById("book").sty le.visibility='hidden';
document.getElementById("movie").st yle.visibility='hidden';
document.getElementById("music").st yle.visibility='hidden';
document.getElementById("game").sty le.visibility='visible';
}

Пепел Феникса · 09.09.2016, 19:30

потому что у вас нет обработчика на убирание мыши.
mouseout

09.09.2016, 19:23	#1
Zopokabra Новичок Джуниор Регистрация: 09.09.2016 Сообщений: 1	Не исчезает подменю когда убираешь мышь со строки меню Подскажите пожалуйста добрые люди. Хочется понять почему выпадающее меню не исчезает когда мышь уводишь с пункта меню.. HTML <html> <head> <title>CSS слои</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="menu"> <a href="#" onMouseOver="books();">Книги</a> <a href="#" onMouseOver="movies();">Фильмы</a> <a href="#" onMouseOver="musiks();">Музыка</a> <a href="#" onMouseOver="games();">Игры</a> </div> <div id="book"> <a href="#">Детективы</a> <a href="#">Классика</a> <a href="#">Фантастика</a> <a href="#">Учебники</a> </div> <div id="movie"> <a href="#">Детективы</a> <a href="#">Драмы</a> <a href="#">Комедии</a> <a href="#">Сериалы</a> </div> <div id="music"> <a href="#">Блюз</a> <a href="#">Джаз</a> <a href="#">Джангл</a> <a href="#">Рок</a> </div> <div id="game"> <a href="#">Азартные</a> <a href="#">Логические</a> <a href="#">Развлекательные</a> <a href="#">Компьютерные</a> </div> </body> </html> CSS #menu { background-color: yellow; border: 1px red solid; width: 150px; height: 100px; margin-top: 10px; } a { text-decoration: none; display: block; color: black; } a:hover { color: blue; text-decoration: underline; display: block; } #book, #movie, #music, #game { background-color: yellow; border: 1px red solid; width: 150px; height: 100px; position: absolute; top: 10px; left: 150px; visibility: hidden; } #book a, #movie a, #music a, #game a { text-decoration: none; color: red; } #book a:hover, #movie a:hover, #music a:hover, #game a:hover { text-decoration: underline; color: pink; } #book{ z-index: 1; } #movie{ z-index: 2; } #music{ z-index: 3; } #game{ z-index: 4; } JS function books(){ document.getElementById("book").sty le.visibility='visible'; document.getElementById("movie").st yle.visibility='hidden'; document.getElementById("music").st yle.visibility='hidden'; document.getElementById("game").sty le.visibility='hidden'; } function movies(){ document.getElementById("book").sty le.visibility='hidden'; document.getElementById("movie").st yle.visibility='visible'; document.getElementById("music").st yle.visibility='hidden'; document.getElementById("game").sty le.visibility='hidden'; } function musiks(){ document.getElementById("book").sty le.visibility='hidden'; document.getElementById("movie").st yle.visibility='hidden'; document.getElementById("music").st yle.visibility='visible'; document.getElementById("game").sty le.visibility='hidden'; } function games(){ document.getElementById("book").sty le.visibility='hidden'; document.getElementById("movie").st yle.visibility='hidden'; document.getElementById("music").st yle.visibility='hidden'; document.getElementById("game").sty le.visibility='visible'; }

09.09.2016, 19:30	#2
Пепел Феникса Старожил Регистрация: 28.01.2009 Сообщений: 21,000	потому что у вас нет обработчика на убирание мыши. mouseout Хорошо поставленный вопрос это уже половина ответа. \| Каков вопрос, таков ответ. Программа делает то что написал программист, а не то что он хотел. Функции/утилиты ждут в параметрах то что им надо, а не то что вы хотите.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Горизонтальное меню, зарезает подменю	dem66	HTML и CSS	2	15.06.2012 14:50
Не исчезает контекстное меню трея	Lindemann66	Qt и кроссплатформенное программирование С/С++	0	10.10.2011 15:44
меню и подменю	foxig	PHP	11	09.07.2011 20:38
Меню и подменю	gta	HTML и CSS	2	20.03.2011 21:16
OnMouseWheel не реагирует когда мышь на компоненте	Selestis	Lazarus, Free Pascal, CodeTyphon	2	03.01.2011 00:18