3

使用 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。

4

1 回答 1

3

您可以使用纯 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');
  }
);
于 2013-07-16T13:53:44.810 回答