Форум

ufaclub · #1 (**permalink**) 03.04.2011, 22:00

<script type="text/javascript">
    jQuery.noConflict();
    
    jQuery(document).ready(function() {
    jQuery("#ed1").hover( function() {
    jQuery("#ed1pod").css('display','block');
    }, function() {
    jQuery("#ed1pod").hide();
    });
    });
    </script>

при наведении на div#ed1 открывается div#ed1pod

когда уберешь мышку с div#ed1 закрывается div#ed1pod

мне над сделать чтоб оно не сразу закрывалось а через секунд 5-10

kostr · #2 (**permalink**) 03.04.2011, 22:23

Можно вместо

jQuery("#ed1pod").hide();

поставить

jQuery("#ed1pod").delay(2000).fadeOut();

delay(2000) - это задержка на 2 секунды.

ufaclub · #3 (**permalink**) 03.04.2011, 22:28

спасибо - то что нужно

ufaclub · #4 (**permalink**) 03.04.2011, 22:31

а как сделать еще что пока курсор над ed1pod div#ed1pod не закрывался?

walik · #5 (**permalink**) 03.04.2011, 23:49

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
	var t;
	$('#ed1, #ed1pod').hover(function() {
		clearTimeout(t);
		$('#ed1pod').show();
	}, function() {
		t = setTimeout(function() {$('#ed1pod').hide();}, 2000);
	});
});
</script>
<style>
#ed1 {
	height: 20px; width: 150px;background-color: red;
}

#ed1pod {
	height: 50px; width: 150px;background-color: black;display: none;
}
</style>
</head>
<body>
<div id="ed1">Наведи</div>
<div id="ed1pod"></div>
</body>
</html>

Пока курсор находится над #ed1 или #ed1pod, то #ed1pod будет виден, иначе через 2 секунды он будет скрыт.

ufaclub · #6 (**permalink**) 04.04.2011, 00:10

спасибо)

alexscus · #7 (**permalink**) 16.03.2017, 09:39

Подскажите, а к списку из неск. блоков можно применить?
чтобы пауза была, когда курсор убираем.

$('nav li').hover(function() {                  
  $(this).addClass('hover').siblings().removeClass('hover');
});

<nav><ul>
    <li>text<span>info</span></li>
    <li>text<span>info</span></li>
    <li>text<span>info</span></li>
</ul></nav>

рони · #8 (**permalink**) 16.03.2017, 10:43

alexscus,

<style type="text/css">
    nav li{
      transition: background-color 0s ease-in-out .3s;
    }
    nav li:hover{
        background-color: #FF0000;
        transition-delay: 0s
    }
  </style>
<nav>
<ul>
    <li>text<span>info</span></li>
    <li>text<span>info</span></li>
    <li>text<span>info</span></li>
</ul>
</nav>

alexscus · #9 (**permalink**) 16.03.2017, 11:54

Спасибо, но немного не то, тут задержка нужна к меню при переходе на другой пункт.

моя вина, надо было мне сразу пример показать - > песочница

$('nav li').hover(function() {
  $(this).addClass('hover').siblings().removeClass('hover');
});

<nav><ul>
	    <li>text<span>1 info</span></li>
	    <li>text<span>2 text text</span></li>
	    <li>text<span>3 text text</span></li>
	    <li>text<span>4 text </span></li>
	    <li>text<span>5 text text text text</span></li>
	    <li>text<span>6 text text</span></li>
</ul></nav>

nav {background: #ccc;color: #666;font-size: 14px;height: 56px;text-transform: uppercase;position: relative;text-align: justify;margin: 0 0 60px;}
nav ul {list-style: none;margin: 0;padding: 0 20px;line-height: 56px;}
nav li {display: inline-block;}
nav ul:after {display: inline-block;width: 100%;content: '';}
nav .hover span {display:block;}
nav span {display:none; position:absolute; left:0; top:56px; width:100%; background:#999; color:#fff; padding:0 10px; box-sizing:border-box;}

alexscus · #10 (**permalink**) 16.03.2017, 13:11

отредактировал выше)

Форум

Справочник

Discord чат

Курсы javascript