Question

大家好我非常想重新创建这里显示的地图的功能： http://bike.sombriocartel.com/shopsplash/。

不幸的是，当我将鼠标悬停在各自的列表项上时，我仍然坚持如何构建切换图像的功能。

PS。有关html的类和构建的说明：

默认类将是世界地图容器（图像容器）中显示的图像，而我已将其余部分（Europe-hover，america-hover等）设置为display：hidden，我希望它们中的每一个都是当鼠标指针悬停在各自的列表项上时，显示在默认图像的顶部。

即。当徘徊在＆＃34;欧洲＆＃34;将显示世界地图上突出显示欧洲（欧洲悬停）的图像以代替默认图像。

<div class="world-map">
 <ul class="region-list">
  <li>Europe<li> 
  <li>America</li>
  <li>Africa</li>
  <li>Asia</li>
 </ul>
 <div class="image-container">
  <img class="default" src='images/map/default-world-map.png'>
  <img class="europe-hover" src='images/h-europe.png'>
  <img class="america-hover" src='images/h-america.png'>
  <img class="africa-hover" src='images/h-africa.png'>
  <img class="asia-hover" src='images/h-asia.png'>
 </div>
</div>

Answer 1

这非常简单：

确保hover地图位于默认地图之上（玩定位）并将其不透明度设置为0;

overlay{
    opacity: 0;
}

我添加了一些额外的类来使用jQuery轻松访问地图：

<div class="world-map">
 <ul class="region-list">
  <li class="europe">Europe<li> 
  <li class="america">America</li>
  <li class="africa">Africa</li>
  <li class="asia">Asia</li>
 </ul>
 <div class="image-container">
  <img class="default" src='images/map/default-world-map.png'>
  <img class="overlay europe" src='images/h-europe.png'>
  <img class="overlay america" src='images/h-america.png'>
  <img class="overlay africa" src='images/h-africa.png'>
  <img class="overlay asia" src='images/h-asia.png'>
 </div>
</div>

然后你可以做类似的事情：

$('.region-list li').hover(
    function () {
       $('.image-container')
       .find('.' + $(this).attr('class'))
       .animate({opacity: 1}, 200);
    },
    function () {
        $('.image-container')
       .find('.' + $(this).attr('class'))
       .animate({opacity: 0}, 200);
 });

我在这做什么？当悬停＆＃34;名称 - 列表项目＆＃34;即时搜索具有相似类名的li项，并将其opacitiy设置为1.当失去焦点时，它会自动将不透明度设置为0。

如果您想知道如何实现这样的事情，那么这段代码不会被测试。

创建一个无序列表，其列表项控制将显示哪个图像

1 个答案: