PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
kuller
Отправлено: 02 Ноября, 2017 - 10:07:05
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 561
Дата рег-ции: Нояб. 2009  


Помог: 2 раз(а)




Помогите пожалуйста разобраться. Почему не срабатывает hover?

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  7. <title>Testpage</title>
  8. </head>
  9. <body>
  10.  
  11. <div class="nav">
  12.         <ul>
  13.                 <li>
  14.                         <a href="#">Link 1</a>
  15.                 </li>
  16.                 <li>
  17.                         <a href="#">Link 2</a>
  18.                 </li>
  19.                 <li>
  20.                         <a href="#">Link 3</a>
  21.                 </li>
  22.                 <li>
  23.                         <a href="#">Link 4</a>
  24.                 </li>
  25.                 <li>
  26.                         <a href="#">Link 5</a>
  27.                 </li>
  28.         </ul>
  29.         <div class="doCategory">
  30.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  31.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  32.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  33.         </div>
  34. </nav>
  35. <script src="js/default.js"></script>
  36. <link rel="stylesheet" href="css/style.css">
  37. </body>
  38. </html>
  39.  


вот css
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. .nav ul, .nav li {
  3.         margin: 0;
  4.         padding: 0;
  5.         list-style-type: none;
  6. }
  7.  
  8. .nav {
  9.         position: fixed;
  10.         z-index: 999;
  11.         background: #fff;
  12.         width: 100%;
  13.         height: 100px;
  14. }
  15.  
  16. .nav ul {
  17.         padding-top: 25px;
  18. }
  19.  
  20. .nav li {
  21.         display: inline-block;
  22.         padding-left: 25px;
  23.         position: relative;
  24.         z-index: 9;
  25. }
  26.  
  27. .doCategory {
  28.         position: absolute;
  29.         left: 0;
  30.         width: 100%;
  31.         height: 0;
  32.         visibility: hidden;
  33.         padding: 30px;
  34.         background: #fff;
  35.         color: #fff;
  36.         box-shadow: 0 5px 5px rgba(232,232,255, .5);
  37.         transition: all .75s ease;
  38. }
  39.  
  40. .nav li:hover .doCategory {
  41.         visibility: visible;
  42.         color: #000;
  43.         height: 150px;
  44. }
  45.  


если hover весит на nav:hover doCategory тогда блок отображается, но надо его отображение при наведении на li. Догнать не могу, что не так...
 
 Top
Faraon-san
Отправлено: 02 Ноября, 2017 - 10:26:59
Post Id



Посетитель


Покинул форум
Сообщений всего: 318
Дата рег-ции: Сент. 2013  


Помог: 8 раз(а)




Правило не верное, можно устанавливает правили только на детей и соседей.
CODE (htmlphp):
скопировать код в буфер обмена
  1. .nav ul:hover + .doCategory

(Отредактировано автором: 02 Ноября, 2017 - 10:27:25)

 
 Top
SergeantPEPPER
Отправлено: 04 Ноября, 2017 - 09:01:55
Post Id



Частый гость


Покинул форум
Сообщений всего: 243
Дата рег-ции: Сент. 2007  
Откуда: Казань


Помог: 0 раз(а)




Faraon-san пишет:
Правило не верное, можно устанавливает правили только на детей и соседей.
CODE (htmlphp):
скопировать код в буфер обмена
  1. .nav ul:hover + .doCategory


Фараон правильно пишет.
С такой иерархией, как у вас, можно решить проблему только через javascript. События onmouseover, onmouseout например. Но я думаю, что правильнее изменить структуру в html.
 
 Top
Vladimir Kheifets
Отправлено: 05 Ноября, 2017 - 19:38:23
Post Id



Посетитель


Покинул форум
Сообщений всего: 293
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 9 раз(а)




kuller пишет:
Помогите пожалуйста разобраться. Почему не срабатывает hover?
Спойлер (Отобразить)

вот css
Спойлер (Отобразить)


если hover весит на nav:hover doCategory тогда блок отображается, но надо его отображение при наведении на li. Догнать не могу, что не так...

Добрый вечер! Вам правильно посоветовали, что нужно менять HTML и CSS
Подсказка: .nav ul:hover + .doCategory не работает.
JS не советую т.к. события onmouseover, onmouseout не работают на мобильных устройствах. Проверять тип устройства и какие события использовать в данном случае не имеет смысла.
Попробуйте сделать так:
CODE (html):
скопировать код в буфер обмена
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  5. <title>Testpage</title>
  6. <style>
  7. .nav ul, .nav li {
  8.         margin: 0;
  9.         padding: 0;
  10.         list-style-type: none;
  11. }
  12.  
  13. .nav {
  14.         position: fixed;
  15.         z-index: 999;
  16.         background: #fff;
  17.         width: 100%;
  18.         height: 100px;
  19. }
  20.  
  21. .nav ul {
  22.         padding-top: 25px;
  23. }
  24.  
  25. .nav li {
  26.         display: inline-block;
  27.         padding-left: 25px;
  28.         position: relative;
  29.         z-index: 9;
  30. }
  31.  
  32. .doCategory {
  33.         position: absolute;
  34.         left: 0;
  35.         width: 400%;
  36.         height: 0;
  37.         visibility: hidden;
  38.         padding: 30px;
  39.         background: #fff;
  40.         color: #fff;
  41.         box-shadow: 0 5px 5px rgba(232,232,255, .5);
  42.         transition: all .75s ease;
  43. }
  44.  
  45. .nav ul li:hover  .doCategory {
  46.         visibility: visible;
  47.         color: #000;
  48.         height: auto;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53.  
  54. <div class="nav">
  55.         <ul>
  56.                 <li>
  57.                         <a href="#">Link 1</a>
  58.                          <div class="doCategory">
  59.                 <p>Category for link 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  60.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  61.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  62.         </div>
  63.                 </li>
  64.                 <li>
  65.                         <a href="#">Link 2</a>
  66.                            <div class="doCategory">
  67.                 <p>Category for link 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  68.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  69.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  70.         </div>
  71.                 </li>
  72.                 <li>
  73.                         <a href="#">Link 3</a>
  74.                            <div class="doCategory">
  75.                 <p>Category for link 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  76.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  77.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  78.         </div>
  79.                 </li>
  80.                 <li>
  81.                         <a href="#">Link 4</a>
  82.                            <div class="doCategory">
  83.                 <p>Category for link 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  84.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  85.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  86.         </div>
  87.                 </li>
  88.                 <li>
  89.                         <a href="#">Link 5</a>
  90.                            <div class="doCategory">
  91.                 <p>Category for link 5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  92.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  93.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque rerum iure numquam tempore blanditiis magnam, ab facere quae omnis minima labore, molestiae eveniet cupiditate magni eaque optio facilis corporis?</p>
  94.         </div>
  95.                 </li>
  96.         </ul>  
  97. </nav>
  98. <script src="js/default.js"></script>
  99. <!--<link rel="stylesheet" href="css/style.css">-->
  100. </body>
  101. </html>

Удачи!

(Отредактировано автором: 08 Ноября, 2017 - 07:00:34)

 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB