всплывающие меню
добрый день
вот столкнулся с тем что не знаю как это реализовать? хочу сделать всплывающие меню, решил использовать "div" и функцию "hover". наводишь мышку на слово "simple text" окно появляется, убираешь мышку с объекта окно пропадает. как сделать так чтоб окно оставалось и тогда когда мышка наведена на само окно, а не только на объект?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Untitled Document</title>
<script>
$(document).ready(function() {
$("#text").hover(function(){
$(".window").show(400);
}, function(){
$(".window").hide(400);
})
});
</script>
<style>
.wrap{width:200px; height:200px; margin:50px auto; border:1px solid #CCC; position:relative;}
.window{ width:100px; height:50px; background:#ccc; border:1px solid #CCC; display:none; position:absolute; top:20px; left:20px;}
</style>
</head>
<body>
<div class="wrap"><span id="text">simple text</span>
<div class="window"></div>
</div>
</body>
</html>
заранее благодарен |
Цитата:
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Untitled Document</title>
<script>
$(document).ready(function() {
$("#text").hover(function(){
$(".window").show(400);
}, function(){
$(".window").hide(400);
})
});
</script>
<style>
.wrap{width:200px; height:200px; margin:50px auto; border:1px solid #CCC; position:relative;}
.window{ width:100px; height:50px; background:#ccc; border:1px solid #CCC; display:none; position:absolute; top:20px; left:20px;}
</style>
</head>
<body>
<div class="wrap"><div id="text">
simple text
<div class="window"></div>
</div>
</div>
</body>
</html>
|
tsigel,
<script>
$(document).ready(function() {
$("#text").mouseenter(function(){
$(".window").stop().show(400);
}).mouseleave(function(){
$(".window").stop().hide(400);
})
});
</script>
Иначе дергается |
Deff,
Имеете в виду не чистится очередь? Так этого не было в вопросе) |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Untitled Document</title>
<script>
$(document).ready(function() {
$(".wrap").mouseenter(function(){
$(this).find(".window").stop().show(400);
}).mouseleave(function(){
$(this).find(".window").stop().hide(400);
})
});
</script>
<style>
.wrap{width:200px; height:200px; margin:50px auto; border:1px solid #CCC; position:relative;}
.window{ width:100px; height:50px; background:#ccc; border:1px solid #CCC; display:none; position:absolute; top:20px; left:20px;}
</style>
</head>
<body>
<div class="wrap">
<div id="text">simple text<div class="window"></div></div>
</div>
<div class="wrap">
<div id="text1">simple text<div class="window"></div></div>
</div>
<div class="wrap">
<div id="text2">simple text<div class="window"></div></div>
</div>
</body>
</html>
|
давай я попробую объяснит без картинки, если не получится тогда сделаю картинку
при наведении мышки на фразу "simple text" появляется окно (.window) - что и есть меню, если переходишь мышкой на этот появившийся (.window) то оно исчезает, потому что убрал мышку с "simple text". а нужно чтоб оно (.window) оставалось и исчезало только когда убираешь с него (.window) мышку |
:-E :blink:
Уже аж 2 варианта реализовано выше) ;) |
ого, пока я писал свои мысли тут уже сколько вариантов.
огромное всем спасибо |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Untitled Document</title>
<script>
$(document).ready(function() {
$("#text").mouseenter(function(){
$(this).find(".window").stop().show(400);
}).mouseleave(function(){
$(this).find(".window").stop().hide(400);
})
});
</script>
<style>
.wrap{width:200px; height:200px; margin:50px auto; border:1px solid #CCC; position:relative;}
.window{ width:100px; height:50px; background:#ccc; border:1px solid #CCC; display:none; position:absolute; top:20px; left:20px;}
</style>
</head>
<body>
<div class="wrap">
<div id="text">simple text<div class="window"></div></div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 22:10. |