Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.04.2011, 00:43
Новичок на форуме
Отправить личное сообщение для jQuery2011 Посмотреть профиль Найти все сообщения от jQuery2011
 
Регистрация: 14.04.2011
Сообщений: 5

Выполнение события при наведение курсора мыши на элемент
Всем здрасти!
Прощу помощи!
Дело в том что есть скрипт выполнение события, при наведение курсора мыши на элемент <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>А здесь может быть все что угодно от текста,  картинок и до флеш (например флеш игры).

Последний раз редактировалось jQuery2011, 15.04.2011 в 23:30.
Ответить с цитированием
  #2 (permalink)  
Старый 15.04.2011, 09:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,164

Сообщение от 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>


Т.е. появляющийся элемент должен быть внутри элемента, который его сделал видимым...
Ответить с цитированием
  #3 (permalink)  
Старый 15.04.2011, 23:19
Новичок на форуме
Отправить личное сообщение для jQuery2011 Посмотреть профиль Найти все сообщения от jQuery2011
 
Регистрация: 14.04.2011
Сообщений: 5

ksa, большое спасибо как вариант очень хороший, но я хотел бы как у меня в скрипте идет раскрытие, и все что ниже элементов просто вместе с ними опускается и подымается, а у Вас идет всплытие поверх всего. Может както можно подправить мой скрипт, или есть что то наподобии него ?
Ответить с цитированием
  #4 (permalink)  
Старый 16.04.2011, 01:41
Аспирант
Отправить личное сообщение для kostr Посмотреть профиль Найти все сообщения от kostr
 
Регистрация: 12.09.2010
Сообщений: 98

<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 16.04.2011, 21:26
Новичок на форуме
Отправить личное сообщение для jQuery2011 Посмотреть профиль Найти все сообщения от jQuery2011
 
Регистрация: 14.04.2011
Сообщений: 5

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, 16.04.2011 в 21:36.
Ответить с цитированием
  #6 (permalink)  
Старый 16.04.2011, 21:46
Новичок на форуме
Отправить личное сообщение для jQuery2011 Посмотреть профиль Найти все сообщения от jQuery2011
 
Регистрация: 14.04.2011
Сообщений: 5

Сообщение от dmitriymar Посмотреть сообщение
....
почти по сотне строк кода.... ,ну чуть- чуть округлил кол-во строк в двух последних вариантах))))
и оба не рабочих-вариант 2-при наведении на ссылку .ну и в первом варианте тож самое будет
поместить контейнеры <div class='cont'> и <div class='cont-hide'> в один контейнер. и именно на этот контейнер повесить обработчики событий мыши и всё ну и соответственно подумать о всплытии.
А можно поподробнее, если можно с примером, то я в этом деле чайник поэтому и обротился сюда за помощью.
Ответить с цитированием
  #7 (permalink)  
Старый 16.04.2011, 22:04
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

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

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

Последний раз редактировалось dmitriymar, 16.04.2011 в 22:13.
Ответить с цитированием
  #8 (permalink)  
Старый 16.04.2011, 22:07
Аспирант
Отправить личное сообщение для kostr Посмотреть профиль Найти все сообщения от kostr
 
Регистрация: 12.09.2010
Сообщений: 98

<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>
Ответить с цитированием
  #9 (permalink)  
Старый 16.04.2011, 22:09
Аспирант
Отправить личное сообщение для kostr Посмотреть профиль Найти все сообщения от kostr
 
Регистрация: 12.09.2010
Сообщений: 98

Просто заменила для блока с информацией mouseout на mouseleave. И поставила в строке таблицы valign="top", а то она прыгает.
Ответить с цитированием
  #10 (permalink)  
Старый 17.04.2011, 01:39
Новичок на форуме
Отправить личное сообщение для jQuery2011 Посмотреть профиль Найти все сообщения от jQuery2011
 
Регистрация: 14.04.2011
Сообщений: 5

Сообщение от kostr Посмотреть сообщение
Просто заменила для блока с информацией mouseout на mouseleave. И поставила в строке таблицы valign="top", а то она прыгает.
Большое Вам спасибо, теперь все работает как хотелось.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необходима помощь! Остановка карусели при наведении курсора мыши. DAZ jQuery 5 11.05.2018 10:49
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05
Появление текста при наведении курсора на ссылку Александра Элементы интерфейса 1 11.05.2009 00:22
FireFox: onmouseover не работает при зажатой кнопке мыши no. Общие вопросы Javascript 4 19.08.2008 13:43