изменить другой стиль div, используя только css

Question

Используя css, я создал эту карту hover на своем сайте: http://travel-fellow.com/destinations Пока вы наведите указатель мыши на континент, он изменит цвет. , но есть еще один список внизу, и я не мог заставить его работать, зависая в другом списке. Html:

<ul id="continents"> 
<li class="northamerica"><a href="">North America</a></li> 
<li class="southamerica"><a href="">South America</a></li> 
<li class="asia"><a href="">Asia</a></li> 
<li class="australia"><a href="">Australia</a></li> 
<li class="africa"><a href="">Africa</a></li> 
<li class="europe"><a href="">Europe</a></li> 
</ul> 

<ul id="continentslist"> 
    <li class="northamerica2"><a href="">North America</a></li> 
    <li class="southamerica2"><a href="">South America</a></li> 
    <li class="asia2"><a href="">Asia</a></li> 
    <li class="australia2"><a href="">Australia</a></li> 
    <li class="africa2"><a href="">Africa</a></li> 
    <li class="europe2"><a href="">Europe</a></li> 
</ul> 

и CSS:

ul#continents { 
    background: url("continents-540.png") no-repeat scroll 0 0 transparent; 
    height: 268px; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    width: 580px; 
} 
ul#continents li { 
    position: absolute; 
} 
ul#continents li a { 
    display: block; 
    height: 100%; 
    text-indent: -9000px; 
} 
ul#continents li.northamerica { 
    height: 163px; 
    left: 0; 
    top: 2px; 
    width: 237px; 
} 
.southamerica { 
    height: 124px; 
    left: 116px; 
    top: 164px; 
    width: 93px; 
} 
.africa { 
    height: 97px; 
    left: 209px; 
    top: 132px; 
    width: 116px; 
} 
.europe { 
    height: 113px; 
    left: 239px; 
    top: 19px; 
    width: 87px; 
} 
.asia { 
    height: 182px; 
    left: 304px; 
    top: 12px; 
    width: 168px; 
} 
.australia { 
    height: 95px; 
    left: 390px; 
    top: 152px; 
    width: 114px; 
} 
ul#continents li a:hover { 
    background: url("continents-540.png") no-repeat scroll 0 0 transparent; 
} 
ul#continents li.northamerica a:hover { 
    background-position: -221px -318px; 
} 
ul#continents li.southamerica a:hover { 
    background-position: 10px -536px; 
} 
ul#continents li.africa a:hover { 
    background-position: -243px -537px; 
} 
ul#continents li.europe a:hover { 
    background-position: -401px -514px; 
} 
ul#continents li.asia a:hover { 
    background-position: -34px -324px; 
} 
ul#continents li.australia a:hover { 
    background-position: -92px -527px; 
} 

Поскольку я использую Joomla я пытаюсь избегать использования JQuery.

Answer 1

Вы можете сделать это с помощью чистого CSS

DEMO http://jsfiddle.net/kevinPHPkevin/daFDn/1163/

img.tree:hover ~ ul .tree { 
    background:#ccc; 
} 

img.lion:hover ~ ul .lion { 
    background:#ccc; 
} 

В вашем случае вы бы назначить страну парить на нужный элемент списка. Я использовал два случайных снимка только для примера, но теория применима. Эти селекторы поддерживаются IE7 +

EDITED

Если вы хотите поддерживать все браузеры, то предлагают поддержку резервного копирования JQuery, или JQuery единственное решение

DEMO http://jsfiddle.net/kevinPHPkevin/daFDn/1167/

$('.lion-img').hover(
    function() { 
    $('.lion').addClass('active'); 
    }, 
    function() { 
    $('.lion').removeClass('active'); 
    } 
); 
$('.tree-img').hover(
    function() { 
    $('.tree').addClass('active'); 
    }, 
    function() { 
    $('.tree').removeClass('active'); 
    } 
);