Change the background image of Div A on hover of Div B using only CSS

Change the background image of Div A on hover of Div B using only CSS

This is what i am having
Four Buttons on home page inside a Main Div with background image.
What i want to achieve
On hover of each button i want to change the background image using only CSS.
I can the HTML markup to some extent.
Below is prototype
My HTML
<div id="mainImage"><img class="style1" width="100%" height="100%" /></div>
<div id="DwellRestBtn"><a href="Dwell & Rest.html">Four</a></div>
<div id="DwellRestBtn"><a href="Dwell & Rest.html">Three</a></div>
<div id="DwellRestBtn"><a href="Dwell & Rest.html">Two</a></div>
<div id="DwellRestBtn"><a href="Dwell & Rest.html">One</a></div>
My CSS
.style1
{
width:500px;
height:500px;
}
.style1
{
content:url('http://www.audenaerde.org/tiger.jpg');
}
a:hover .style1
{
content:url('http://www.butterflypictures.net/images/morpho-butterfly.jpg');
}
If there is method with css3 its should be compatibilty with atleast
modern browsers.