html - Multiple effects on single DIV element hover -

i trying multiple effects on single image hover allow best outcome least code possible. note: not want jquery @ all! css (even 3).

so have image change on hover , @ same time cause div below said image change background image (which text, couldn't find way change text tried image) , having hover image on img tag have link place want.

so far managed image changed , links working on hover image this:

css

.container {     width: 1500px;     height: 400px; }  .image a:hover .container {     background-image: url('logo-tp-text.png'); } 

html

<div class="image">     <a href="http://www.google.com">         <img src="logo-tp.png" onmouseover="this.src='logo-fb.png';" onmouseout="this.src='logo-tp.png';">     </a> </div>  <div class="container"></div> 

now, more experienced people me can see, have image on img tag self onmouseovered , out try , avoid complications on css, worked: changes image need (logo-fb) , reverts logo-tp onmouseout, link working. however, not changing .container background expected on hover on img tag (which tag reference)

so, waiting beating: doing wrong? using ff 32 browser.

css not contains parent navigation selectors... descendant , following sibilings.

since .container div sibiling .image div, set :hover pseudo div instead anchor:

.image:hover ~ .container {      background-image: url('logo-tp-text.png'); } 

as ~ general sibiling selector.

more info here: mdn general sibiling selector

also

if html markup stays same showed, mean, if .container remains immediate followed sibiling .image div, can use adjacent sibiling selector

.image:hover + .container {      background-image: url('logo-tp-text.png'); }