Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Не могу разобраться с CSS

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

1. kuller - 02 Ноября, 2017 - 10:07:05 - перейти к сообщению
Помогите пожалуйста разобраться. Почему не срабатывает 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. Догнать не могу, что не так...
2. Faraon-san - 02 Ноября, 2017 - 10:26:59 - перейти к сообщению
Правило не верное, можно устанавливает правили только на детей и соседей.
CODE (htmlphp):
скопировать код в буфер обмена
  1. .nav ul:hover + .doCategory
3. SergeantPEPPER - 04 Ноября, 2017 - 09:01:55 - перейти к сообщению
Faraon-san пишет:
Правило не верное, можно устанавливает правили только на детей и соседей.
CODE (htmlphp):
скопировать код в буфер обмена
  1. .nav ul:hover + .doCategory


Фараон правильно пишет.
С такой иерархией, как у вас, можно решить проблему только через javascript. События onmouseover, onmouseout например. Но я думаю, что правильнее изменить структуру в html.
4. Vladimir Kheifets - 05 Ноября, 2017 - 19:38:23 - перейти к сообщению
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>

Удачи!

 

Powered by ExBB FM 1.0 RC1