Отображение скрытого слоя

DeD · October 3, 2011

Привет народ. Как сделать, чтобы при наведении сразу не исчезал блок (можно было просмотреть, по-клацать там), т. е. я сделал только открытие.сокрытие блока по наведению мыши.


<script type="text/javascript">
	sid = '';
	function ishow(id) {
		if(sid != '') {
			document.getElementById(sid).style.display = "none";
		} else {
			document.getElementById(id).style.display = "block";
		}
	}

	function ihide(id) {
		if(id != '') {
			document.getElementById(id).style.display = "none";
		}
	}
</script>


<a href="#" onmouseover="ishow('lodka_1');" onmouseout="ihide('lodka_1');"><img src="images/lodka_1.png" width="292" height="107" /></a>
<div id="lodka_1" class="iorder">
   <img src="images/lodka_3.png" width="240" height="87" />
   <p>HYUNDAI SONATA</p>
   <p>Lorem ipsum dolor sit amet, ei eum saepe congue dissentiunt, pri cu probo mazim percipit, sint decore no vis. Ad pri adolescens deterruisset</p>
</div>

psywalker · October 3, 2011

Аватарку меняем сразу.

По сабжу: Вот в этой функции замени условия, чтобы при наведении блок появлялся, а при увидении на событие onmouseout - убирался.

        function ihide(id) {
                if(id != '') {
                        document.getElementById(id).style.display = "none";
                }
        }

DeD · October 4, 2011

так эта функция и вызывается на onmouseout и блок скрывается

sigma77 · October 4, 2011

DeD,

http://javascript.ru/setTimeout

Оно?

Softlink · October 4, 2011

В зависимости от контекста блока и кроссбраузерности, можно и вовсе обойтись без JS. На транзишенах сделать все.

psywalker · October 4, 2011

В зависимости от контекста блока и кроссбраузерности, можно и вовсе обойтись без JS. На транзишенах сделать все.

Буду признателен за пример.

Softlink · October 4, 2011

В зависимости от контекста блока и кроссбраузерности, можно и вовсе обойтись без JS. На транзишенах сделать все.
Буду признателен за пример.

http://jsfiddle.net/rugXa/

psywalker · October 4, 2011

Ага, спасибо. Ща разберусь и задам вопросы.

Softlink · October 4, 2011

В зависимости от контекста блока и кроссбраузерности, можно и вовсе обойтись без JS. На транзишенах сделать все.
Буду признателен за пример.
http://jsfiddle.net/rugXa/
Что-то там пусто в отображении(

В смысле пусто? Картинок нет? Я просто скопировал код ТС и все. Картинки поставить не проблема. Главное понятно как это работает.

psywalker · October 4, 2011

Softlink,

Ок, а теперь вопрос. Покажи мне, как сделать так, чтобы вот тут блок медленно показывался при наведении на ссылку. display: none важно! Так как блок, красный, не должен присутствовать на страинце, если он скрыт.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.block { position: absolute; left:0; top: 0; width: 300px; }
a {
-webkit-transition-property:all;
-webkit-transition-duration:5s;
-webkit-transition-delay:1s;
-moz-transition-property:all;
-moz-transition-duration:5s;
-moz-transition-delay:1s;	
}
#lodka_1{
	opacity: 0;
	display: none;
	background: red;


}

a:hover~#lodka_1{
	opacity: 1;
	display: block;


-webkit-transition-property: all;
-webkit-transition-duration:5s;
-webkit-transition-delay:0s;
-moz-transition-property:all;
-moz-transition-duration:5s;
-moz-transition-delay:0s;
}
</style>
</head>

<body>
<div class="block">
<a href="#">Показать блок</a>
<div id="lodka_1" class="iorder">

   <p>HYUNDAI SONATA</p>
   <p>Lorem ipsum dolor sit amet, ei eum saepe congue dissentiunt, pri cu probo mazim percipit, sint decore no vis. Ad pri adolescens deterruisset</p></div>
</div>
   <p>Lorem ipsum dolor sit amet, ei eum saepe congue dissentiunt, pri cu probo mazim percipit, sint decore no vis. Ad pri adolescens deterruisset</p>
      <p>Lorem ipsum dolor sit amet, ei eum saepe congue dissentiunt, pri cu probo mazim percipit, sint decore no vis. Ad pri adolescens deterruisset</p>
         <p>Lorem ipsum dolor sit amet, ei eum saepe congue dissentiunt, pri cu probo mazim percipit, sint decore no vis. Ad pri adolescens deterruisset</p>
            <p>Lorem ipsum dolor sit amet, ei eum saepe congue dissentiunt, pri cu probo mazim percipit, sint decore no vis. Ad pri adolescens deterruisset</p>
</body>
</html>

Softlink · October 4, 2011

Softlink,
Ок, а теперь вопрос. Покажи мне, как сделать так, чтобы вот тут блок медленно показывался при наведении на ссылку. display: none важно! Так как блок, красный, не должен присутствовать на страинце, если он скрыт.

Ну во-первых там транзишн надо применять не к ссылке, а к самому блоку.

Во-вторых, сколько я не бился(еще раньше), применить транзишн для :none>:block не получилось. На некоторых сайтах тоже писали об этой проблеме, но, судя по всему, она так и не решена. Кто кинет в меня ссылкой на готовое решение - буду премного благодарен. В таких случаях лучше использовать позиционирование и opacity. Свой пример выше я приводил с поправкой на контекст блока, т.е. там было несколько "если".

С другой стороны это вроде бы как логично. Как мы можем применять свойство к "несуществующему" блоку? :unsure: Может кто разъяснит, а?

psywalker · October 4, 2011

Softlink,
Ок, а теперь вопрос. Покажи мне, как сделать так, чтобы вот тут блок медленно показывался при наведении на ссылку. display: none важно! Так как блок, красный, не должен присутствовать на страинце, если он скрыт.
Ну во-первых там транзишн надо применять не к ссылке, а к самому блоку.
Во-вторых, сколько я не бился(еще раньше), применить транзишн для :none>:block не получилось. На некоторых сайтах тоже писали об этой проблеме, но, судя по всему, она так и не решена. Кто кинет в меня ссылкой на готовое решение - буду премного благодарен. В таких случаях лучше использовать позиционирование и opacity. Свой пример выше я приводил с поправкой на контекст блока, т.е. там было несколько "если".
С другой стороны это вроде бы как логично. Как мы можем применять свойство к "несуществующему" блоку? Может кто разъяснит, а?

Ага, понял, спасиб. Да, хорошо бы и мне кто нибудь разъяснил и показал пример - заменитель)

DeD · October 4, 2011

sigma77, возможно вечерком посижу посмотрю.

Softlink, по вашему примеру, результат тотже, что и у меня сейчас (только без js), как только мышь убираешь блок скрывается, а мне надо сохранение его на время.

Softlink · October 4, 2011

sigma77, возможно вечерком посижу посмотрю.
Softlink, по вашему примеру, результат тотже, что и у меня сейчас (только без js), как только мышь убираешь блок скрывается, а мне надо сохранение его на время.

Смотрели в Опере или ИЕ?

DeD · October 4, 2011

Opera естественно

Softlink · October 4, 2011

Opera естественно

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

mishka · October 4, 2011

Да просто не верно делаете. Как по мне так логичнее так:

Навели курсор на линку - появился блок. Увели курсор с блока(не с линки), он исчез.

Nekromancer · October 4, 2011

Ага, понял, спасиб. Да, хорошо бы и мне кто нибудь разъяснил и показал пример - заменитель)

Не совсем понял какой вам пример нужен. Как вы представляете переход между отображением none и block? Как минимум это не логично и не имеет смысла. А вообще браузер это не jQuery чтоб делать вот такие вот финтиклюшки.

psywalker · October 4, 2011

Ага, понял, спасиб. Да, хорошо бы и мне кто нибудь разъяснил и показал пример - заменитель)
Не совсем понял какой вам пример нужен. Как вы представляете переход между отображением none и block? Как минимум это не логично и не имеет смысла. А вообще браузер это не jQuery чтоб делать вот такие вот финтиклюшки.

Ну а как тогда спрятать блок, чтобы можно было сквозь него при этом текст копировать, но чтобы потом он плавно появился? На CSS!

Softlink · October 4, 2011

Не совсем понял какой вам пример нужен. Как вы представляете переход между отображением none и block? Как минимум это не логично и не имеет смысла.

Угу, вот и я об этом же написал.

Ну а как тогда спрятать блок, чтобы можно было сквозь него при этом текст копировать, но чтобы потом он плавно появился? На CSS!

Как и писал тебе - opacity и позиционирование http://jsfiddle.net/rugXa/2/

Nekromancer · October 4, 2011

Ага, понял, спасиб. Да, хорошо бы и мне кто нибудь разъяснил и показал пример - заменитель)
Не совсем понял какой вам пример нужен. Как вы представляете переход между отображением none и block? Как минимум это не логично и не имеет смысла. А вообще браузер это не jQuery чтоб делать вот такие вот финтиклюшки.
Ну а как тогда спрятать блок, чтобы можно было сквозь него при этом текст копировать, но чтобы потом он плавно появился? На CSS!

Не, ну не всё же на css делать. Берём js и вешаем callback.

Ну а как тогда спрятать блок, чтобы можно было сквозь него при этом текст копировать, но чтобы потом он плавно появился? На CSS!
Как и писал тебе - opacity и позиционирование http://jsfiddle.net/rugXa/2/

Если что ещё z-index анимируется.

psywalker · October 4, 2011

Nekromancer,

Не, ну не всё же на css делать. Берём js и вешаем callback.

А что такое callback?

Softlink · October 4, 2011

Если что ещё z-index анимируется.

Я знаю. Только хрен редьки не слаще. Что z-index прилепить, что top написать.

Nekromancer · October 4, 2011

Nekromancer,
Не, ну не всё же на css делать. Берём js и вешаем callback.
А что такое callback?

Google > Функция обратного вызова

Sign In

Отображение скрытого слоя

Question

Link to comment

Share on other sites

23 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information