Слои

Z-index в меню

 
Посетитель
no avatar
Сообщений: 38
Народ нужна помошь
http://maxsell.tmweb.ru/shablon/
справа есть часть меню, все меню будет выполнено в виде таких закладок.
Подскажите как сделать что бы при наведении мышкой слои меняли z-index на больший.
Нашел такую вещь как klayers.js но как его настроить так и не дошло.
http://driver-car.ru/ авто каталог Пушкинского района
Хостинг TimeWeb
Посетитель
small user social cms
МедальКубок зрительских симпатийПочетный донор проекта
Сообщений: 713
А просто стилями не пробовал?
Реклама
cms
Посетитель
no avatar
Сообщений: 38
а как стилями это можно сделать, что бы при наведении мышькой на пункт меню, менялось свойство слоя
http://driver-car.ru/ авто каталог Пушкинского района
Хостинг TimeWeb
Посетитель
small user social cms
МедальКубок зрительских симпатийПочетный донор проекта
Сообщений: 713
Конечно. onmouseout, onmouseover, a:hover итд и задаешь зетиндекс. Поищи на эту тему в инете - много инфы. Не из педагогических соображений, просто некогда сейчас подробно описывать. Да и лучше, если сам разберешься, чем рецепты выдавать )
Посетитель
no avatar
Сообщений: 38
я пробовал через a:hover но он не видит в стилях z-index (покрайне мере firebug z-index не отображает)
http://driver-car.ru/ авто каталог Пушкинского района
Хостинг TimeWeb
InstantCMS Team
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1176
боюсь что при текущей верстке не получится сделать то о чем вы говорите
потому что когда активен первый div ("о нас") он полностью заслоняет второй
соответственно :hover для второго никогда не сработает
нужно сделать табы так, чтобы они не заслоняли друг друга
Вопросы и ответы
InstantCMS Team
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1176
попробуйте подключить к странице jQuery и вставить такой код в <head>:
Код JS:
  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.  
не обещаю что поможет, но вдруг :)
Вопросы и ответы
Посетитель
no avatar
Сообщений: 38
ну на самом деле div ("о нас") лежит под div ("новости")
скрипт не сработал cry что же делать?????
http://driver-car.ru/ авто каталог Пушкинского района
Хостинг TimeWeb
Посетитель
no avatar
Сообщений: 38
Код PHP:
  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
Посетитель
no avatar
Сообщений: 38
Код PHP:
  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
Посетитель
no avatar
Сообщений: 38
a:hover не работает scratch
http://driver-car.ru/ авто каталог Пушкинского района
Хостинг TimeWeb
Посетитель
small user social cms
МедальКубок зрительских симпатийПочетный донор проекта
Сообщений: 713
Ну, если див никак не зацепить один из под другого, то сверху положить что-то типа карты с разметкой. Но это гемор. Лучше продумать верстку так, чтобы слои не перекрывали друг друга полностью в тех местах, где предполагается какое-то воздействие на них.
Модератор
small user social cms
МедальМедаль за отзывчивостьКубок зрительских симпатий
Сообщений: 435
a:hover не работает

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

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

Код PHP:
  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.  
не проверял, но по идее....
Посетитель
no avatar
Сообщений: 38
Александр, ааааа заработало
тысяча благодарностей Вам уважаемый, да Вы еще и земляк, я родился в Гомеле dance
Редактировалось: 1 раз (Последний: 1 ноября 2010 в 22:26)
http://driver-car.ru/ авто каталог Пушкинского района
Хостинг TimeWeb
InstantCMS Team
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1176
maxsell:
ааааа заработало

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

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

вам по хорошему надо переверстать это дело
Вопросы и ответы
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.