вопрос
Всем привет!
Прошу помощи от знатоков CSS3. В интернете есть куча сайтов где рассматриваются возможности CSS. Но я нигде не нашел информацию про скрытые (так сказать) возможности hover. У меня с английским плохо, однако мне это не помешало прочесть хорошую часть этой книги - http://www.amazon.com/Pro-CSS3-Animation-Professional-Apress/dp/1430247223. И так собственно говоря вопрос: Можно ли при наведении на определенный элемент поменять значения другого элемента. Что я выяснил: В определенных случаях это возможно, вот пример. Однако и тут есть свои подводные камни, например, при наведении курсора мыши на первый блок, браузер меняет цвет фона второго блока, однако обратного эффекта почему то не наблюдается. Почему? Последний по списку элемент не может пенять первый? Или же вот другая загадка: из книги (о которой говорилось выше) я выяснил что в CSS разрешен такой синтакс: .panel-1:hover + .panel-2{свои значения}. Миниатюрным движением двух своих пальцев левой руки я смог взглянуть на исходный код этого сайта, а точнее на всплывающее меню, и тут я увидел совершено другую картину: #menu ul li:hover > a > .sf-sub-indicator
Объясните пожалуйста все возможные варианты использование псевдокласса :hover. Когда применяется "+" а когда ">"? Заранее благодарен всем кто постарается помочь. Спасибо. С уважением Weblitt.
П.С. Думаю автор сайта не будет против, приводите пожалуйста ссылки на другие ресурсы (включая и англоязычные), где рассматривается эти вопросы. Я лично нашел в спецификации WC3 вот это.
Прошу помощи от знатоков CSS3. В интернете есть куча сайтов где рассматриваются возможности CSS. Но я нигде не нашел информацию про скрытые (так сказать) возможности hover. У меня с английским плохо, однако мне это не помешало прочесть хорошую часть этой книги - http://www.amazon.com/Pro-CSS3-Animation-Professional-Apress/dp/1430247223. И так собственно говоря вопрос: Можно ли при наведении на определенный элемент поменять значения другого элемента. Что я выяснил: В определенных случаях это возможно, вот пример. Однако и тут есть свои подводные камни, например, при наведении курсора мыши на первый блок, браузер меняет цвет фона второго блока, однако обратного эффекта почему то не наблюдается. Почему? Последний по списку элемент не может пенять первый? Или же вот другая загадка: из книги (о которой говорилось выше) я выяснил что в CSS разрешен такой синтакс: .panel-1:hover + .panel-2{свои значения}. Миниатюрным движением двух своих пальцев левой руки я смог взглянуть на исходный код этого сайта, а точнее на всплывающее меню, и тут я увидел совершено другую картину: #menu ul li:hover > a > .sf-sub-indicator
Объясните пожалуйста все возможные варианты использование псевдокласса :hover. Когда применяется "+" а когда ">"? Заранее благодарен всем кто постарается помочь. Спасибо. С уважением Weblitt.
П.С. Думаю автор сайта не будет против, приводите пожалуйста ссылки на другие ресурсы (включая и англоязычные), где рассматривается эти вопросы. Я лично нашел в спецификации WC3 вот это.
Демо (CSS и jQuery варианты): http://jsfiddle.net/9pLWc/2/
Также крайне полезно знать о селекторе обобщенных родственных элементов и о селекторе дочерних элементов.
jQuery события:
.mouseenter()
.mouseleave()
Отступление:
В 85% случаев хватает CSS селекторов, но бывают и так, что дерево элементов не позволяет ограничиться стилями.
На селекторе дочерних элементов, к примеру, можно создать меню любого уровня вложенности.
З.Ы. Слово "hover" обозначает не скрытие, а действие при наведении: http://translate.google.com/#auto/ru/hover%20over%20me
Также крайне полезно знать о селекторе обобщенных родственных элементов и о селекторе дочерних элементов.
jQuery события:
.mouseenter()
.mouseleave()
Отступление:
В 85% случаев хватает CSS селекторов, но бывают и так, что дерево элементов не позволяет ограничиться стилями.
На селекторе дочерних элементов, к примеру, можно создать меню любого уровня вложенности.
З.Ы. Слово "hover" обозначает не скрытие, а действие при наведении: http://translate.google.com/#auto/ru/hover%20over%20me
