Back to CSS Tips
Preview: what the working site looks like.
Wide DC3
Narrow DC3

There is no upper/previous element selector in CSS. You can select next immediate sibling element using +, you can select nested element with >, you can select child element with a blank space between the hover and target element and you can select all the next siblings element using ~, but you don't get a selector that targets a previous element so I to make this demo work I change the HTML structure from the original.

The markup
<!doctype html>
<meta charset="utf-8">
<title>Untitled Document</title>
    <div id="container">
            <div id="box3">Wide DC3</div>
            <div id="box4">Narrow DC3</div>
		<div id="box1"></div>
		<div id="box2"></div>
    <!--end container--></div>
	<div id="preload"></div>
html, body {
	margin: 0;
	background: #fc6;
#preload { background: url(DC3-wide.jpg), url(DC3-narrow.jpg); }
#container {
	width: 800px;
	margin: 40px auto;
	overflow: auto; 
	background: #8facdf;
#box1, #box2 { 
	height: 444px; 
	float: left;
	#box1 { width: 800px; }
	#box2 {
		width: 400px;
		margin: 0 0 0 -400px;
#box3, #box4 {
	height: 30px;
	width: 400px;
	margin: 5px 0 0;
	float: left;
	line-height: 30px;
	text-align: center;
	color: #fff;
	#box3 { background: #000; }
	#box4 { background: #444; }
		#box3:hover, #box4:hover { 
		color: #f00;
		cursor: pointer;
		#box3:hover ~ #box1 { background-image: url(DC3-wide.jpg); }
		#box4:hover ~ #box2  { background: url(DC3-narrow.jpg); }