css - 仅使用 css 更改另一个 div 的样式

Question

我使用 CSS 在我的站点中创建了这个悬停 map : 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 来实现

演示 http://jsfiddle.net/kevinPHPkevin/daFDn/1163/

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

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

在您的情况下，您会将国家/地区悬停分配给正确的列表元素。为了示例，我使用了两张随机图片，但该理论适用。 IE7+支持这些选择器

已编辑

如果你想支持所有浏览器，那么提供一个 jQuery 备份支持，或者一个仅 jQuery 的解决方案

演示 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');
  }
);