Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Изменить родителя при :hover потомка

 PHP.SU

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


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

> Описание: CSS
Поиск в теме | Версия для печати
DeepVarvar Супермодератор
Отправлено: 31 Марта, 2011 - 09:08:56
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
Нужно изменить фон у ячейки при наведении на ссылку.
Как сделать без жабаскрипта, только CSS?
CODE (html):
скопировать код в буфер обмена
  1. ...<td class="nav"><a href="#">Link</a></td>...

(Добавление)
Вот я туплю....
CODE (htmlphp):
скопировать код в буфер обмена
  1. .tnav:hover {
  2.         background-image: url(../img/mhbg.png);
  3. }
 
 Top
grefon
Отправлено: 31 Марта, 2011 - 09:26:09
Post Id



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


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


Помог: 32 раз(а)
Чета мне кажется это невозможно. CSS не понимает цепочку вверх (от детей к родителям).
(Добавление)
DeepVarvar пишет:
Вот я туплю....
CODE (html):
скопировать код в буфер обмена
  1. .tnav:hover {
  2.         background-image: url(../img/mhbg.png);
  3. }

Так это же не при наведении на ссылку а при наведении на ячейку!

(Отредактировано автором: 31 Марта, 2011 - 09:27:36)



-----
____________________________________________________________________
Ну как то так, наверное.
http://grefon[dot]com
 
 Top
DeepVarvar Супермодератор
Отправлено: 31 Марта, 2011 - 09:39:04
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
grefon пишет:
Так это же не...

Да это так...
grefon пишет:
кажется это невозможно

Да это так...
(Добавление)
Хотя вот сам писал нечто похожее:
CODE (html):
скопировать код в буфер обмена
  1. <style>
  2. #genres {
  3.         margin-top: 40px;
  4. }
  5.  
  6. ul {
  7.         position: absolute;
  8.         display: none;
  9.         margin: 0px;
  10.         margin-left: 140px;
  11.         margin-top: -22px;
  12.         padding: 0px;
  13.         width: 140px;
  14. }
  15.  
  16. ul#tree {
  17.         display: block;
  18. }
  19.  
  20. li {
  21.         display: block;
  22.         width: 140px;
  23.         list-style: none;
  24.         margin: 0px;
  25.         margin-bottom: 1px;
  26. }
  27.  
  28. .item {
  29.         cursor: pointer;
  30.         display: block;
  31.         line-height: 12px;
  32.         font-size: 12px;
  33.         padding: 4px;
  34.         font-weight: bold;
  35.         border: solid 1px #707070;
  36.         color: #000000;
  37.         background-color: #e2e2e2;
  38. }
  39.  
  40. li:hover div:hover {
  41.         color: #ffffff;
  42.         background-color: #707070;
  43. }
  44.  
  45. ul#tree li:hover ul { display: block; }
  46. ul#tree li:hover ul ul { display: none; }
  47.  
  48. ul#tree ul li:hover ul { display: block; }
  49. ul#tree ul li:hover ul ul { display: none; }
  50.  
  51. ul#tree ul ul li:hover ul { display: block; }
  52. ul#tree ul li:hover ul ul ul { display: none; }
  53.  
  54. ul#tree ul ul ul li:hover ul { display: block; }
  55. ul#tree ul li:hover ul ul ul ul { display: none; }
  56.  
  57. </style>
  58. <div id="genres">
  59.         <ul id="tree">
  60.                 <li>
  61.                         <div class="item">genres</div>
  62.                         <ul>
  63.                                 <li>
  64.                                         <div class="item">electro</div>
  65.  
  66.                                         <ul>
  67.                                                 <li><div class="item">idustrial</div></li>
  68.                                                 <li><div class="item">newage</div></li>
  69.                                                 <li><div class="item">ambient</div></li>
  70.                                                 <li><div class="item">techno</div></li>
  71.                                                 <li><div class="item">electro</div></li>
  72.  
  73.                                                 <li><div class="item">house</div></li>
  74.                                                 <li><div class="item">chillout</div></li>
  75.                                                 <li><div class="item">breakbeat</div></li>
  76.                                                 <li><div class="item">hardcore</div></li>
  77.                                                 <li><div class="item">drumnbass</div></li>
  78.                                                 <li><div class="item">jungle</div></li>
  79.  
  80.                                                 <li><div class="item">dubstep</div></li>
  81.                                                 <li><div class="item">darkstep</div></li>
  82.                                                 <li><div class="item">electrostep</div></li>
  83.                                                 <li><div class="item">jump</div></li>
  84.                                                 <li><div class="item">rave</div></li>
  85.                                                 <li><div class="item">dance</div></li>
  86.  
  87.                                                 <li><div class="item">psy</div></li>
  88.                                                 <li><div class="item">trance</div></li>
  89.                                                 <li><div class="item">other</div></li>
  90.                                         </ul>
  91.                                 </li>
  92.                                 <li>
  93.                                         <div class="item">rock</div>
  94.  
  95.                                         <ul>
  96.                                                 <li><div class="item">rocknroll</div></li>
  97.                                                 <li><div class="item">hardrock</div></li>
  98.                                                 <li>
  99.                                                         <div class="item">metal</div>
  100.                                                         <ul>
  101.                                                                 <li><div class="item">heavy</div></li>
  102.  
  103.                                                                 <li><div class="item">speed</div></li>
  104.                                                                 <li><div class="item">power</div></li>
  105.                                                                 <li><div class="item">death</div></li>
  106.                                                                 <li><div class="item">black</div></li>
  107.                                                                 <li><div class="item">dark</div></li>
  108.                                                                 <li><div class="item">other</div></li>
  109.  
  110.                                                         </ul>
  111.                                                 </li>
  112.                                                 <li>
  113.                                                         <div class="item">punk</div>
  114.                                                         <ul>
  115.                                                                 <li><div class="item">ska</div></li>
  116.                                                                 <li><div class="item">oi</div></li>
  117.  
  118.                                                                 <li><div class="item">scream</div></li>
  119.                                                                 <li><div class="item">folk</div></li>
  120.                                                                 <li><div class="item">other</div></li>
  121.                                                         </ul>
  122.                                                 </li>
  123.                                                 <li><div class="item">hardcore</div>
  124.                                                         <ul>
  125.  
  126.                                                                 <li><div class="item">ska</div></li>
  127.                                                                 <li><div class="item">metal</div></li>
  128.                                                                 <li><div class="item">trash</div></li>
  129.                                                                 <li><div class="item">folk</div></li>
  130.                                                                 <li><div class="item">rap</div></li>
  131.                                                                 <li><div class="item">other</div></li>
  132.  
  133.                                                         </ul>
  134.                                                 </li>
  135.                                                 <li><div class="item">emo</div></li>
  136.                                                 <li><div class="item">other</div></li>
  137.                                         </ul>
  138.                                 </li>
  139.                                 <li><div class="item">ska</div>
  140.  
  141.                                         <ul>
  142.                                                 <li><div class="item">country</div></li>
  143.                                                 <li><div class="item">jazz</div></li>
  144.                                                 <li><div class="item">rocksteady</div></li>
  145.                                                 <li><div class="item">raggy</div></li>
  146.                                                 <li><div class="item">other</div></li>
  147.  
  148.                                         </ul>
  149.                                 </li>
  150.                                 <li><div class="item">pop</div>
  151.                                         <ul>
  152.                                                 <li><div class="item">public</div></li>
  153.                                                 <li><div class="item">disco</div></li>
  154.                                                 <li><div class="item">pop</div></li>
  155.  
  156.                                                 <li><div class="item">other</div></li>
  157.                                         </ul>
  158.                                 </li>
  159.                                 <li><div class="item">rap</div>
  160.                                         <ul>
  161.                                                 <li><div class="item">gfunk</div></li>
  162.                                                 <li><div class="item">gangsta</div></li>
  163.  
  164.                                                 <li><div class="item">core</div></li>
  165.                                                 <li><div class="item">other</div></li>
  166.                                         </ul>
  167.                                 </li>
  168.                                 <li><div class="item">ost</div>
  169.                                         <ul>
  170.                                                 <li><div class="item">film</div></li>
  171.  
  172.                                                 <li><div class="item">cartoon</div></li>
  173.                                                 <li><div class="item">game</div></li>
  174.                                                 <li><div class="item">other</div></li>
  175.                                         </ul>
  176.                                 </li>
  177.                                 <li>
  178.                                         <div class="item">people</div>
  179.  
  180.                                         <ul>
  181.                                                 <li>
  182.                                                         <div class="item">modern</div>
  183.                                                         <ul>
  184.                                                                 <li><div class="item">folk</div></li>
  185.                                                                 <li><div class="item">other</div></li>
  186.                                                         </ul>
  187.  
  188.                                                 </li>
  189.                                                 <li><div class="item">other</div></li>
  190.                                                 </li>
  191.                                         </ul>
  192.                                 </li>
  193.                                 <li><div class="item">classic</div></li>
  194.                                 <li><div class="item">latin</div></li>
  195.  
  196.                                 <li><div class="item">blues</div></li>
  197.                                 <li><div class="item">jazz</div></li>
  198.                                 <li><div class="item">country</div></li>
  199.                                 <li><div class="item">chanson</div></li>
  200.                                 <li><div class="item">romance</div></li>
  201.                                 <li><div class="item">roque</div></li>
  202.  
  203.                                 <li><div class="item">author</div></li>
  204.                                 <li><div class="item">other</div></li>
  205.                         </ul>
  206.                 </li>
  207.         </ul>
  208. </div>
  209.  

(Добавление)
Самое интересное - строки 45-55
 
 Top
grefon
Отправлено: 31 Марта, 2011 - 09:57:20
Post Id



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


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


Помог: 32 раз(а)
Так правильно, для дочерних элементов такое сделать можно. А вот чтобы родителю задать стиль по псевдоэлементу ребенка... В общем я такого не встречал и сколько не экспериментировал - ничего не вышло!


-----
____________________________________________________________________
Ну как то так, наверное.
http://grefon[dot]com
 
 Top
JustUserR
Отправлено: 31 Марта, 2011 - 21:35:08
Post Id



Активный участник


Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009  


Помог: 17 раз(а)
DeepVarvar пишет:
Нужно изменить фон у ячейки при наведении на ссылку.
Как сделать без жабаскрипта, только CSS?
В качестве возможного варианта ля осуществления решения предполагаемой задачи, заключающеся в проведении модификации ассоциированной группы CSS-свойтсв для активного отображаемого объекта web-страницы, основанного на обеспечение генерации сопоставляемых параметров в области включенных дочерних элементов, для которых производится процесс расчета ассоциированных CSS-свойств в пониженном базовом элементном уровне трактования


-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Улыбка
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/
 
 Top
DeepVarvar Супермодератор
Отправлено: 31 Марта, 2011 - 23:00:23
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
JustUserR пишет:
В качестве возможного варианта....элементном уровне трактования....

Тут идет только описание задачи...
Видимо решение тут:
JustUserR пишет:
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик

Радость Радость Радость Радость Радость
 
 Top
JustUserR
Отправлено: 02 Апреля, 2011 - 21:08:32
Post Id



Активный участник


Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009  


Помог: 17 раз(а)
DeepVarvar пишет:
Тут идет только описание задачи
Прошу прощения
== CUT ==
В качестве возможного варианта ля осуществления решения предполагаемой задачи, заключающеся в проведении модификации ассоциированной группы CSS-свойтсв для активного отображаемого объекта web-страницы, основанного на обеспечение генерации сопоставляемых параметров в области включенных дочерних элементов, для которых производится процесс расчета ассоциированных CSS-свойств в пониженном базовом элементном уровне трактования, допустимо использование определения целевой группы последовательных СSS-свойств, для которых осуществляется формирования ассоциированны параметров отображения реальных блоков пользовательной web-страницы во вторичном пониженном базовом элементом уровне трактования таким образом, что включение вариативной составляющей элемента внутреннего объекта обеспечивает модификацию группы цепочки родительных объектов, что может быть основано на технологии expession в браузере Internet explorer и информационном поле класса after/before content в других обозревателях


-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Улыбка
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/
 
 Top
LEONeso
Отправлено: 14 Ноября, 2011 - 20:04:12
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)
Пример:
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. td {
  3. background:silver;
  4. }
  5.  
  6. td:hover {
  7. background:blue;
  8. }
  9.  


-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
SAD
Отправлено: 14 Ноября, 2011 - 20:19:37
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2508
Дата рег-ции: Май 2009  
Откуда: Днепропетровск, Украина


Помог: 75 раз(а)
LEONeso пишет:
td:hover {
background:blue;
}

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


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



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

 
Powered by ExBB FM 1.0 RC1. InvisionExBB