CSS Hover to change other elements
I have this navigation bar which I have done in CSS, I would like it so when I hover over one of the 3 navigation icons it will change the main image background position.

I've tried a few ways but not managed to get them to work properly.


**CSS**


        /* Nav Button 1 */
    
    .nav1 {
    	float:left;
    	padding-top:20px;
    	border:none;
    	outline:none;
    }
    
    #nav1
    {
      display: block;
      width: 92px;
      height: 107px;
      background: url("images/triangle.png") no-repeat 0 0;
    
    }
    
    #nav1:hover
    { 
      background-position: 0 -107px;
    }
    
    
    /* Nav Button 2 */
    
    .nav2 {
    	float:left;
    	padding-top:20px;
    	border:none;
    	outline:none;
    	padding-right: 0px;
    }
    
    #nav2
    {
      display: block;
      width: 92px;
      height: 107px;
      background: url("images/triangle.png") no-repeat 0 0;
    
    }
    
    #nav2:hover
    { 
      background-position: 0 -107px;
    }
    
    /* Nav Button 3 */
    
    .nav3 {
    	float:left;
    	padding-top:20px;
    	border:none;
    	outline:none;
    	padding-right: 0px;
    }
    
    #nav3
    {
      display: block;
      width: 92px;
      height: 107px;
      background: url("images/triangle.png") no-repeat 0 0;
    
    }
    
    #nav3:hover
    { 
      background-position: 0 -107px;
    }

    /* Nav Name */
    
    .navname {
    	float:left;
    	padding-top:20px;
    	border:none;
    	outline:none;
    	padding-right: 0px;
    }
    
    #navname
    {
      display: block;
      width: 228px;
      height: 81px;
      background: url("images/blank.png") no-repeat 0 0;
    
    }

**HTML**


	<div id="navigation">
		<div class="nav1">
		<a id="nav1" href="#"></a>
		</div>
		<div class="nav2">
		<a id="nav2" href="#"></a>
		</div>
		<div class="nav3">
		<a id="nav3" href="#"></a>
		</div>
		<div class="navname"><a id="navname" href="#"></a>
		</div>
	</div>

Any ideas how this can be done? The 'navname' element is background position I want to change when hovering over either nav1, nav2, nav3.


Thanks :D
CSS Hover to change other elements
===

I have this navigation bar which I have done in CSS, I would like it so when I hover over one of the 3 navigation icons it will change the main image background position.

I've tried a few ways but not managed to get them to work properly.


**CSS**


        /* Nav Button 1 */
    
    .nav1 {
    	float:left;
    	padding-top:20px;
    	border:none;
    	outline:none;
    }
    
    #nav1
    {
      display: block;
      width: 92px;
      height: 107px;
      background: url("images/triangle.png") no-repeat 0 0;
    
    }
    
    #nav1:hover
    { 
      background-position: 0 -107px;
    }
    
    
    /* Nav Button 2 */
    
    .nav2 {
    	float:left;
    	padding-top:20px;
    	border:none;
    	outline:none;
    	padding-right: 0px;
    }
    
    #nav2
    {
      display: block;
      width: 92px;
      height: 107px;
      background: url("images/triangle.png") no-repeat 0 0;
    
    }
    
    #nav2:hover
    { 
      background-position: 0 -107px;
    }
    
    /* Nav Button 3 */
    
    .nav3 {
    	float:left;
    	padding-top:20px;
    	border:none;
    	outline:none;
    	padding-right: 0px;
    }
    
    #nav3
    {
      display: block;
      width: 92px;
      height: 107px;
      background: url("images/triangle.png") no-repeat 0 0;
    
    }
    
    #nav3:hover
    { 
      background-position: 0 -107px;
    }

    /* Nav Name */
    
    .navname {
    	float:left;
    	padding-top:20px;
    	border:none;
    	outline:none;
    	padding-right: 0px;
    }
    
    #navname
    {
      display: block;
      width: 228px;
      height: 81px;
      background: url("images/blank.png") no-repeat 0 0;
    
    }

**HTML**


	<div id="navigation">
		<div class="nav1">
		<a id="nav1" href="#"></a>
		</div>
		<div class="nav2">
		<a id="nav2" href="#"></a>
		</div>
		<div class="nav3">
		<a id="nav3" href="#"></a>
		</div>
		<div class="navname"><a id="navname" href="#"></a>
		</div>
	</div>

Any ideas how this can be done? The 'navname' element is background position I want to change when hovering over either nav1, nav2, nav3.


Thanks :D