Найти на сайте
  2. Форумы
  3. ГОТОВЫЕ РЕШЕНИЯ
  4. Шаблоны, графика, стили
  5. Слои

Слои

Z-index в меню

#1 1 ноября 2010 в 16:35
Народ нужна помошь
maxsell.tmweb.ru/shablon/
справа есть часть меню, все меню будет выполнено в виде таких закладок.
Подскажите как сделать что бы при наведении мышкой слои меняли z-index на больший.
Нашел такую вещь как klayers.js но как его настроить так и не дошло.
http://driver-car.ru/ авто каталог Пушкинского района Хостинг TimeWeb
0
#2 1 ноября 2010 в 16:55
А просто стилями не пробовал?
0
#3 1 ноября 2010 в 17:02
а как стилями это можно сделать, что бы при наведении мышькой на пункт меню, менялось свойство слоя
http://driver-car.ru/ авто каталог Пушкинского района Хостинг TimeWeb
0
#4 1 ноября 2010 в 17:42
Конечно. onmouseout, onmouseover, a:hover итд и задаешь зетиндекс. Поищи на эту тему в инете — много инфы. Не из педагогических соображений, просто некогда сейчас подробно описывать. Да и лучше, если сам разберешься, чем рецепты выдавать )
0
#5 1 ноября 2010 в 17:49
я пробовал через a:hover но он не видит в стилях z-index (покрайне мере firebug z-index не отображает)
http://driver-car.ru/ авто каталог Пушкинского района Хостинг TimeWeb
0
#6 1 ноября 2010 в 17:57
боюсь что при текущей верстке не получится сделать то о чем вы говорите
потому что когда активен первый div ("о нас") он полностью заслоняет второй
соответственно :hover для второго никогда не сработает
нужно сделать табы так, чтобы они не заслоняли друг друга
Вопросы и ответы
0
#7 1 ноября 2010 в 18:02
попробуйте подключить к странице jQuery и вставить такой код в <head>:
  1.  
  2. <script type="text/javascript">

  3. $(document).ready(function(){

  4. $('#menuright div').hover(

  5.  
  6.     function(){

  7.         $(this).attr('z-index', 100);

  8.     },

  9.  
  10.     function(){

  11.         $(this).attr('z-index', 1);

  12.     }

  13.  
  14. );

  15. });

  16. </script>

  17.  
не обещаю что поможет, но вдруг :)
Вопросы и ответы
0
#8 1 ноября 2010 в 20:37
ну на самом деле div ("о нас") лежит под div ("новости")
скрипт не сработал cryчто же делать?????
http://driver-car.ru/ авто каталог Пушкинского района Хостинг TimeWeb
0
#9 1 ноября 2010 в 21:44 
  1. 			  <div id="menuright">
  2.  
  3. 			    <div class="onovosty"  style="position:absolute; width:85px; height:600px; top:118px; left:1px;" >
  4.                 <a href="/shablon/Untitled-2.php"><img src="novosty1.gif" width="82" height="687" border="0" /></a>
  5.  
  6.                 </div>
  7. 			    <div class="oonas" style="position:absolute; width:85px; height:804px; top:-3px;">
  8.                 <a href="/shablon/Untitled-1.php"><img src="onas1.gif" width="84" height="809" border="0" /></a>
  9.                 </div>
  10.  
  11. 			  </div>
http://driver-car.ru/ авто каталог Пушкинского района Хостинг TimeWeb
0
#10 1 ноября 2010 в 21:45 
  1. #menuright{
  2. 	width:80px;
  3. 	height:805px;
  4. 	position:absolute;
  5. 	left: 880px;
  6. 	top: 80px;
  7. }
  8. .oonas {
  9. 		z-index:1;
  10.     }
  11.     .oonas a {
  12. 		z-index:1;
  13.  
  14.     }
  15.  
  16. 	.oonas a:hover {
  17. 		z-index:100;
  18.     }
  19. .onovosty {
  20. 		z-index:2;
  21.     }
  22.     .onovosty a {
  23. 		z-index:2;
  24.  
  25.     }
  26.  
  27. 	.onovosty a:hover {
  28. 		z-index:100;
  29.     }
http://driver-car.ru/ авто каталог Пушкинского района Хостинг TimeWeb
0
#11 1 ноября 2010 в 21:47
a:hover не работает scratch
http://driver-car.ru/ авто каталог Пушкинского района Хостинг TimeWeb
0
#12 1 ноября 2010 в 21:53
Ну, если див никак не зацепить один из под другого, то сверху положить что-то типа карты с разметкой. Но это гемор. Лучше продумать верстку так, чтобы слои не перекрывали друг друга полностью в тех местах, где предполагается какое-то воздействие на них.
0
#13 1 ноября 2010 в 22:13

a:hover не работает


почему же. вот именно a:hover и работает. только не так как надо.
я так понял нужно сам слой приподнять. а не ссылку. поэтому нужно связывать непосредственно div и :hover.

попробуй ка css поменять на такой:

  1.  
  2. #menuright{
  3. 	width:80px;
  4. 	height:805px;
  5. 	position:absolute;
  6. 	left: 880px;
  7. 	top: 80px;
  8. }
  9. .oonas {
  10. 		z-index:1;
  11.     }
  12.     .oonas a {
  13. 		z-index:1;
  14.  
  15.     }
  16.  
  17. 	.oonas:hover {
  18. 		z-index:100;
  19.     }
  20. .onovosty {
  21. 		z-index:2;
  22.     }
  23.     .onovosty a {
  24. 		z-index:2;
  25.  
  26.     }
  27.  
  28. 	.onovosty:hover {
  29. 		z-index:100;
  30.     }
  31.  
  32.  
не проверял, но по идее…
0
#14 1 ноября 2010 в 22:22
Александр, ааааа заработало
тысяча благодарностей Вам уважаемый, да Вы еще и земляк, я родился в Гомеле dance
http://driver-car.ru/ авто каталог Пушкинского района Хостинг TimeWeb
0
#15 1 ноября 2010 в 22:35

ааааа заработало

maxsell

если навести на "о нас", то он выделяется, но! если тут же навести на "новости", то ничего не происходит

потому что когда активен первый div ("о нас") он полностью заслоняет второй
соответственно :hover для второго никогда не сработает

Администратор

вам по хорошему надо переверстать это дело
Вопросы и ответы
0
Проблема с шаблоном
Позиции модулей?
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.