Changing the child element s CSS when the parent is hovered

Question

First of all  I m assuming this is too complex for CSS3  but if there s a solution in there somewhere  I d love to go with that instead   The HTML is pretty straightforward    lt div class  parent  gt       lt div class  child  gt          Text Block 1      lt  div gt   lt  div gt    lt div class  parent  gt       lt div class  child  gt          Text Block 2      lt  div gt   lt  div gt    The child div is set to display none  by default  but then changes to display block  when the mouse is hovered over the parent div  The problem is that this markup appears in several places on my site  and I only want the child to be displayed if the mouse is over it s parent  and not if the mouse is over any of the other parents  they all have the same class name and no IDs    I ve tried using   this  and  children   to no avail       parent   hover function                  this  children   child   css  display   block               function                   this  children   child   css  display   none

User · Answer

parent hover  gt   child         do anything with this child

User · Answer

Use toggleClass         parent   hover function      this  find   child   toggleClass  color         where color is the class  You can style the class as you like to achieve the behavior you want  The example demonstrates how class is added and removed upon mouse in and out   Check Working example here

User · Answer

Why not just use CSS    parent hover  child   parent hover  child   display  block      and then add JS for IE6  inside a conditional comment for instance  which doesn t support  hover properly   jQuery   parent   hover function          jQuery this  addClass  hover       function          jQuery this  removeClass  hover          Here s a quick example  Fiddle

User · Answer

I have what i think is a better solution  since it is scalable to more levels  as many as wanted  not only two or three   I use borders  but it can also be done with whateever style wanted  like background-color   With the border  the idea is to    Have a different border color only one div  the div over where the mouse is  not on any parent  not on any child  so it can be seen only such div border in a different color while the rest stays on white    You can test it at  http   jsbin com ubiyo3 13  And here is the code    lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta charset utf-8   gt   lt title gt Hierarchie Borders MarkUp lt  title gt   lt style gt      parent   display  block  position  relative  z-index  0              height  auto  width  auto  padding  25px                  parent-bg   display  block  height  100   width  100                   position  absolute  top  0px  left  0px                  border  1px solid white  z-index  0                     parent-bg hover   border  1px solid red        child   display  block  position  relative  z-index  1              height  auto  width  auto  padding  25px                 child-bg   display  block  height  100   width  100                  position  absolute  top  0px  left  0px                 border  1px solid white  z-index  0                    child-bg hover   border  1px solid red        grandson   display  block  position  relative  z-index  2                 height  auto  width  auto  padding  25px                    grandson-bg   display  block  height  100   width  100                     position  absolute  top  0px  left  0px                    border  1px solid white  z-index  0                       grandson-bg hover   border  1px solid red      lt  style gt   lt  head gt   lt body gt     lt div class  parent  gt      Parent      lt div class  child  gt        Child        lt div class  grandson  gt          Grandson          lt div class  grandson-bg  gt  lt  div gt         lt  div gt         lt div class  child-bg  gt  lt  div gt       lt  div gt       lt div class  parent-bg  gt  lt  div gt     lt  div gt   lt  body gt   lt  html gt

User · Answer

To change it from css you dont even need to set the child class   parent  gt  div nth-child 1    display none     parent hover  gt  div nth-child 1    display  block

User · Answer

No need to use the JavaScript or jquery  CSS is enough    child  display none     parent hover  child  display block      SEE DEMO

User · Answer

If you re using Twitter Bootstrap styling and base JS for a drop down menu    child  display none     parent hover  child  display block      This is the missing piece to create sticky-dropdowns  that aren t annoying    The behavior is to   Stay open when clicked  close when clicking again anywhere else on the page Close automatically when the mouse scrolls out of the menu s elements

User · Answer

Not sure if there s terrible reasons to do this or not  but it seems to work with me on the latest version of Chrome Firefox without any visible performance problems with quite a lot of elements on the page     not  hover  gt  parent-hover-show      display none      But this way  all you need is to apply parent-hover-show to an element and the rest is taken care of  and you can keep whatever default display type you want without it always being  block  or making multiple classes for each type

User · Answer

Stephen s answer is correct but here s my adaptation of his answer   HTML   lt div class  parent  gt       lt p gt  parent 1  lt  p gt       lt div class  child  gt          Text Block 1      lt  div gt   lt  div gt    lt div class  parent  gt       lt p gt  parent 2  lt  p gt       lt div class  child  gt          Text Block 2      lt  div gt   lt  div gt    CSS   parent   width  100px  min-height  100px  color  red     child   width  50px  min-height  20px  color  blue  display  none     parent hover  child   parent hover  child   display  block      jQuery    this is only necessary for IE and should be in a conditional comment  jQuery   parent   hover function          jQuery this  addClass  hover       function          jQuery this  removeClass  hover          You can see this example working over at jsFiddle

[jquery] Changing the child element's CSS when the parent is hovered

Examples related to jquery

Examples related to css

Examples related to jquery-selectors

Examples related to parent