Форум

jQuery2011 · #1 (**permalink**) 15.04.2011, 00:43

Всем здрасти!
Прощу помощи!

Дело в том что есть скрипт выполнение события, при наведение курсора мыши на элемент <div class='cont'></div> всплывает скрытый элемент <div class='cont-hide'></div>, а когда отводишь от <div class='cont'></div>, то элемент <div class='cont-hide'></div> прячется. Мне это очень подходит. Проблема в том что, бы при переводе курсора мыши с элемент <div class='cont'></div> на элемент <div class='cont-hide'></div> то этот элемет прячиться а надо что б оставался видимым пока на нем будет курсор мыши. Как можно это исправить ? Может я плохо написал в чем проблема и как должно работать, поэтому прошу посмотреть как он работает.
Если к примеру вставить ссылку в всплывающий текст то неуспеваещь на неё нажать, он сразу прячеться.
Вот сам скрапт :

<style> div {width:500px; border:1px solid #393939} div.cont-hide {display:none} </style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script> 
<script> $(document).ready(function(){ $('div.cont').mouseover(function(){    $(this).next().slideDown('slow'); }).mouseout(function(){    $(this).next().slideUp('slow');   });   }); </script>
<div class='cont'>Скачать песню</div><div class='cont-hide'>Для того что бы скачать песню перейдите по ссылке  бла бла бла бла бла бла бла бла <a href="http://www.site.ru">Песни</a> бла бла бла бла бла бла бла бла  бла блабла бла бла бла бла бла бла бла </div><br>А здесь может быть все что угодно от текста,  картинок и до флеш (например флеш игры).

ksa · #2 (**permalink**) 15.04.2011, 09:14

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

Как можно это исправить ?

Как вариант... И без скриптов.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#txt {
	position: relative;
	height: 20px;
	border: 1px solid;
}
#box {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100px;
	height: 100px;
	background-color: orange;
	display: none;
}
#txt:hover > #box {
	display: block;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='txt'>
	<div id='box'></div>
</div>
</body>
</html>

Т.е. появляющийся элемент должен быть внутри элемента, который его сделал видимым...

jQuery2011 · #3 (**permalink**) 15.04.2011, 23:19

ksa, большое спасибо как вариант очень хороший, но я хотел бы как у меня в скрипте идет раскрытие, и все что ниже элементов просто вместе с ними опускается и подымается, а у Вас идет всплытие поверх всего. Может както можно подправить мой скрипт, или есть что то наподобии него ?

kostr · #4 (**permalink**) 16.04.2011, 01:41

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#txt {
	height: 20px;
	border: 1px solid;
}
#box {
	width: 100px;
	height: 100px;
	background-color: orange;
	display: none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script> 
<script type="text/javascript">
function posMouse(e){
 var mouX = 0, mouY = 0;
 if (!e) e = window.event;
 if (e.pageX || e.pageY) {
  mouX = e.pageX;
  mouY = e.pageY;
 } else if (e.clientX || e.clientY) {
  mouX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
  mouY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
 }
 return {"x":mouX, "y":mouY}
}

$(document).ready(function(){
 $('#txt').mouseover(function(){
  $(this).next().slideDown('slow');
 })
 .mouseout(function(e){
  var elem = $(this).next(), mou = posMouse(e);
  if ((mou.x < elem.offset().left) || (mou.x > elem.offset().left + elem.width()) || (mou.y < elem.offset().top))
   elem.slideUp('slow');
 });
 $('#box').mouseout(function(){
  $(this).slideUp('slow');
 });
});
</script>
</head>
<body>
<div id='txt'></div>
<div id='box'></div>

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
</body>
</html>

jQuery2011 · #5 (**permalink**) 16.04.2011, 21:26

kostr, большое спасибо Вам, это то что нужно, но когда в сплывающем элементе есть текст тогда все нормально работает, а когда картинка или ссылка, в этом элементе то переведя курсор с текста на картинку или наоборот, то элемент сразу прячется хотя курсор с всплывающего элемента неотводищ, тоже самое происходит с ссылкой и текстом. То же самое если в всплывающем элементе идет текст и php скрипт выводящий форму обратной связи.
Посмотрите сами:

<html>
<head>
<style type="text/css">
div.txt {
	
        height: 20px;
	border: 1px solid;
}
div.box {
	
	
	background-color: ;
	display: none;
        border: 1px solid;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script> 
<script type="text/javascript">
function posMouse(e){
 var mouX = 0, mouY = 0;
 if (!e) e = window.event;
 if (e.pageX || e.pageY) {
  mouX = e.pageX;
  mouY = e.pageY;
 } else if (e.clientX || e.clientY) {
  mouX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
  mouY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
 }
 return {"x":mouX, "y":mouY}
}

$(document).ready(function(){
 $('div.txt').mouseover(function(){
  $(this).next().slideDown('slow');
 })
 .mouseout(function(e){
  var elem = $(this).next(), mou = posMouse(e);
  if ((mou.x < elem.offset().left) || (mou.x > elem.offset().left + elem.width()) || (mou.y < elem.offset().top))
   elem.slideUp('slow');
 });
 $('div.box').mouseout(function(){
  $(this).slideUp('slow');
 });
});
</script>
</head>
<body>
<table border=0 cellpadding=3 cellspacing=1 width="100%">
<tr width=100%>

<td width=50%><div class='txt'>Описание</div>
<div class='box'><img src="" alt="Фотография" width="200" height="70"> Бла бла бла бла бла бла  бла бла бла бла бла бла бла блабла  бла бла бла бла бла бла бла бла бла бла бла</div></td>
<td width=20%><div class='txt'>Оцените статью</div>
<div class='box'>А тут какой то php скрипт каторый выводит рейтинг статьи в виде картиног где можно проголосовать</div></td>
<td width=30%><div class='txt'>Добавить в избраное</div>
<div class='box'>Если вам понравилась статья то можете <a href="http://site.ru">Добавить в избранное</a> и быть в курсе самый новых обновлений на сайте</div></td>

</tr>
</table>
Бла бла бла бла бла бла  бла бла бла бла бла бла бла блабла  бла бла бла бла бла бла бла бла бла бла бла Бла бла бла бла бла бла  бла бла бла бла бла бла бла блабла  бла бла бла бла бла бла бла бла бла бла бла
</body>
</html>

jQuery2011 · #6 (**permalink**) 16.04.2011, 21:46

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

....
почти по сотне строк кода....

,ну чуть- чуть округлил кол-во строк в двух последних вариантах))))
и оба не рабочих-вариант 2-при наведении на ссылку .ну и в первом варианте тож самое будет
поместить контейнеры <div class='cont'> и <div class='cont-hide'> в один контейнер. и именно на этот контейнер повесить обработчики событий мыши и всё

ну и соответственно подумать о всплытии.

А можно поподробнее, если можно с примером, то я в этом деле чайник поэтому и обротился сюда за помощью.

dmitriymar · #7 (**permalink**) 16.04.2011, 22:04

чуть не правильно прочитал написанное. увидел позже,что ты этуже проблему описываешь. с джиквери не дружу.
ответ твой здесь-
http://javascript.ru/tutorial/events/intro

смотри Порядок срабатывания событий и никакие велосипеды не понадобятся

kostr · #8 (**permalink**) 16.04.2011, 22:07

<html>
<head>
<style type="text/css">
div.txt {
	
        height: 20px;
	border: 1px solid;
}
div.box {
	
	
	background-color: ;
	display: none;
        border: 1px solid;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script> 
<script type="text/javascript">
function posMouse(e){
 var mouX = 0, mouY = 0;
 if (!e) e = window.event;
 if (e.pageX || e.pageY) {
  mouX = e.pageX;
  mouY = e.pageY;
 } else if (e.clientX || e.clientY) {
  mouX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
  mouY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
 }
 return {"x":mouX, "y":mouY}
}

$(document).ready(function(){
 $('div.txt').mouseover(function(){
  $(this).next().slideDown('slow');
 })
 .mouseout(function(e){
  var elem = $(this).next(), mou = posMouse(e);
  if ((mou.x < elem.offset().left) || (mou.x > elem.offset().left + elem.width()) || (mou.y < elem.offset().top))
   elem.slideUp('slow');
 });
 $('div.box').mouseleave(function(){
  $(this).slideUp('slow');
 });
});
</script>
</head>
<body>
<table border=0 cellpadding=3 cellspacing=1 width="100%">
<tr width=100% valign="top">

<td width=50%><div class='txt'>Описание</div>
<div class='box'><img src="" alt="Фотография" width="200" height="70"> Бла бла бла бла бла бла  бла бла бла бла бла бла бла блабла  бла бла бла бла бла бла бла бла бла бла бла</div></td>
<td width=20%><div class='txt'>Оцените статью</div>
<div class='box'>А тут какой то php скрипт каторый выводит рейтинг статьи в виде картиног где можно проголосовать</div></td>
<td width=30%><div class='txt'>Добавить в избраное</div>
<div class='box'>Если вам понравилась статья то можете <a href="http://site.ru">Добавить в избранное</a> и быть в курсе самый новых обновлений на сайте</div></td>

</tr>
</table>
Бла бла бла бла бла бла  бла бла бла бла бла бла бла блабла  бла бла бла бла бла бла бла бла бла бла бла Бла бла бла бла бла бла  бла бла бла бла бла бла бла блабла  бла бла бла бла бла бла бла бла бла бла бла
</body>
</html>

kostr · #9 (**permalink**) 16.04.2011, 22:09

Просто заменила для блока с информацией mouseout на mouseleave. И поставила в строке таблицы valign="top", а то она прыгает.

jQuery2011 · #10 (**permalink**) 17.04.2011, 01:39

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

Просто заменила для блока с информацией mouseout на mouseleave. И поставила в строке таблицы valign="top", а то она прыгает.

Большое Вам спасибо, теперь все работает как хотелось.

Форум

Справочник

Discord чат

Курсы javascript