html - How to change background on hover for 2 elements using css -

html - How to change background on hover for 2 elements using css -

i'm having time trying solve this. want alter background of 2 kid elements if user hovers on parent element.

here image looks using code have. should on hover brownish image, no blue.

the html:

<div id="nav-about" class="nav-btn"> <h2>about us</h2> <div class="nav-btn-lt"></div> <div class="nav-btn-rt"></div> </div>

the nav-btn class uses repeating x background, nav-btn-lt class shadow unfortunately couldn't reproduce using css, , nav-btn-rt class image cannot show on hover.

here css:

.nav-btn { position:relative; width:22%; display:inline-block; height:110px; cursor:pointer; margin:11px 2% 0 0; border-top:2px solid #efffff; border-bottom:2px solid #1f3152; background:url(bg-btn-off.gif) repeat-x; } .nav-btn:hover { background:url(bg-btn-on.gif) repeat-x; } .nav-btn h2 { position:absolute; top:10px; left:10px; font-size:150%; font-weight:600; color:#eee; } .nav-btn-lt { position:absolute; top:-2px; left:0; width:2px; height:114px; background:url(lt-nav.png) no-repeat 0 0; } .nav-btn-rt { position:absolute; top:-2px; right:0; width:54px; height:114px; background:url(rt-nav-off.png) no-repeat 0 0; }

is possible alter images on both kid elements upon hovering on parent element?

you target parent's hover state , add together kid elements want attributes modified.

.nav-btn:hover .nav-btn-lt, .nav-btn:hover .nav-btn-rt { background: blue; }

jsfiddle: http://jsfiddle.net/0zqm0bd7/1/

html css css3