Javascript-форум - Событие при наведение мыши, которое раскроет содержимое блока (элемента)...

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Событие при наведение мыши, которое раскроет содержимое блока (элемента)... (https://javascript.ru/forum/dom-window/26859-sobytie-pri-navedenie-myshi-kotoroe-raskroet-soderzhimoe-bloka-ehlementa.html)

Событие при наведение мыши, которое раскроет содержимое блока (элемента)...

Привет Всем, помогите пожалуйста. Нужно сделать (доделать) скрипт, чтобы при наведении на первый блок <div> показывалось его содержимое, а при наведении на содержимое - блок не закрывался. Будет 3-5 блоков, расположенных вниз один за другим. При этом надо, чтобы при наведении на первый (и т.д.) блок - остальные не открывались.

<html>
<head>
<style type="text/css">
div.txt {
	
        height: 20px;
	border: 1px solid;
}
div.box {
	
	
	background-color: ;
	display: none;
        border: 0px;
}
</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>

<div class='txt'>Новость 1</div>
<div class='box'>Описание 1</div>
<div class='txt'>Новость 2</div>
<div class='box'>Описание 2</div>
<div class='txt'>Новость 3</div>
<div class='box'>Описание 3</div>

</body>
</html>

Цитата:

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

Нужно сделать (доделать) скрипт, чтобы при наведении на первый блок <div> показывалось его содержимое, а при наведении на содержимое - блок не закрывался. Будет 3-5 блоков, расположенных вниз один за другим. При этом надо, чтобы при наведении на первый (и т.д.) блок - остальные не открывались.

можно так, по-моему проще

<!DOCTYPE html>
<html>
<head>
	<style>
		div.txt {
			height: 20px;
			border: 1px solid;
		}
		div.box {
			display: none;
		}
	</style>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js'></script>
	<script>
		$(function () {
		  $('.item').hover(function () {
			$('.box', this).slideDown('slow');
		  }, function () {
			$('.box', this).slideUp('slow'); 
		  });                
		});
	</script>
</head>
<body>
 
	<div class='item'>
	  <div class='txt'>Новость 1</div>
	  <div class='box'>Описание 1</div>
	</div>

	<div class='item'>
	  <div class='txt'>Новость 2</div>
	  <div class='box'>Описание 2</div>
	</div>
	  
	<div class='item'>
	  <div class='txt'>Новость 3</div>
	  <div class='box'>Описание 3</div>
	</div>

</body>
</html>

Цитата:

Сообщение от Pavel M. (Сообщение 164884)

можно так, по-моему проще
...

Спасибо за попытку помочь, но твой вариант как гармошка. А мне как раз надо защита от "гармошки", то есть когда пользователь проводит по всем элементам сразу и быстро, чтобы ничего не раскрывалось, а когда он остановился на элементе больше 1-2 сек - чтобы он раскрылся. В твоем варианте если раза 3 быстро провести вверх-вниз, а потом убрать мышь, то "гармошка" продолжает играть еще 3 раза. В мной приведенном скрипте такая же ошибка. Просто скрипт запоминает, сколько я раз провел по элементу div.text и, не успевая проиграть анимацию, продолжает её проигрывать после отведения мыши. Как бы это исправить?

сделайте например задержку открытия на пару секунд

<!DOCTYPE html>
<html>
<head>
    <style>
        div.txt {
            height: 20px;
            border: 1px solid;
        }
        div.box {
            display: none;
        }
    </style>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js'></script>
    <script>
        $(function () {
          $('.item').hover(function () {
*!*
            $('.box', this).delay(2000).slideDown('slow');
*/!*
          }, function () {
            $('.box', this).stop(true, true).slideUp('slow');
          });               
        });
    </script>
</head>
<body>
  
    <div class='item'>
      <div class='txt'>Новость 1</div>
      <div class='box'>Описание 1</div>
    </div>
 
    <div class='item'>
      <div class='txt'>Новость 2</div>
      <div class='box'>Описание 2</div>
    </div>
       
    <div class='item'>
      <div class='txt'>Новость 3</div>
      <div class='box'>Описание 3</div>
    </div>
 
</body>
</html>