Question

使用css我在我的网站中创建了这个悬停地图： 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');
  }
);

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

1 个答案: