Форум

qwertycal · #1 (**permalink**) 23.01.2013, 11:54

добрый день
вот столкнулся с тем что не знаю как это реализовать?
хочу сделать всплывающие меню, решил использовать "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>

заранее благодарен

Deff · #2 (**permalink**) 23.01.2013, 11:58

Сообщение от qwertycal

как сделать так чтоб окно оставалось и тогда когда мышка наведена на само окно, а не только на объект?

Сделайте скриншот с обозначением нужной позиции мышки при наведении и без -Ибо не понятен запрос

tsigel · #3 (**permalink**) 23.01.2013, 12:02

<!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>

Deff · #4 (**permalink**) 23.01.2013, 12:06

tsigel,

<script>
$(document).ready(function() {
  $("#text").mouseenter(function(){
     $(".window").stop().show(400);
  }).mouseleave(function(){
     $(".window").stop().hide(400);
  })
});
</script>

Иначе дергается

tsigel · #5 (**permalink**) 23.01.2013, 12:10

Deff,
Имеете в виду не чистится очередь? Так этого не было в вопросе)

Deff · #6 (**permalink**) 23.01.2013, 12:11

<!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>

qwertycal · #7 (**permalink**) 23.01.2013, 12:26

давай я попробую объяснит без картинки, если не получится тогда сделаю картинку
при наведении мышки на фразу "simple text" появляется окно (.window) - что и есть меню, если переходишь мышкой на этот появившийся (.window) то оно исчезает, потому что убрал мышку с "simple text". а нужно чтоб оно (.window) оставалось и исчезало только когда убираешь с него (.window) мышку

tsigel · #8 (**permalink**) 23.01.2013, 12:33

Уже аж 2 варианта реализовано выше)

qwertycal · #9 (**permalink**) 23.01.2013, 12:37

ого, пока я писал свои мысли тут уже сколько вариантов.
огромное всем спасибо

Deff · #10 (**permalink**) 23.01.2013, 12:38

<!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>

Форум

Справочник

Discord чат

Курсы javascript