Using only CSS, show div on hover over

Question

I would like to show a div when someone hovers over an element, but I would like to do this in CSS and not JavaScript. Do you know how this can be ach

Answer 1

The + allow 'select' only first not nested element , the > select nested elements only - the better is to use ~ which allow to select arbitrary element which is child of parent hovered element. Using opacity/width and transition you can provide smooth appear

div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }

.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }

Hover me... to see

 

BBBBB
  
CCCCC
    
DDDDD
  


EEEEE
  
FFFFF
    
GGGGG
    
HHHHH