Question

过去三天我一直在试图弄清楚如何解决我的问题。

在此页面上想要做什么http://www.hungryhippo.se/test/contact.html 是当徘徊在办公室DIV时，那个办公室的人们强调了其他人的不透明度，即50％。

第二阶段同时在点击或悬停时，地图将被替换为与该办公室相关的地图。我在尝试解决这个问题时注意到的是我无法使用隐藏，因为我通过Dreamweaver获取的谷歌地图小部件会出现错误并显示灰色条而不是地图。

然后我在jsfiddle

中使用了这个脚本/ TennG /

因此，我一直在考虑的一个解决方案是使用可见性，然后隐藏的那些将具有高度0px，然后在应该显示时缩放到100％。

即使你没有给我完整的代码（可以理解）请求只是把我推向正确的方向。不是HTML中的热点，jquery对我来说是个新手，试图赶上它。

谢谢！

Answer 1

你页面上的HTML太复杂了（你似乎有一个divitis的案例）直接回答你需要用它做什么，但从一般意义上讲，只要你有一些方法将“标题”办公室div与个人联系起来可以相当简单地添加淡化效果。例如，您可以为标题指定一个data-属性，以指定所有相关人员div将具有的类，如下所示：

<div class="office" data-office="Stockholm">Stockholm Office</div>
<div class="office" data-office="Denmark">Denmark Office</div>
<div class="office" data-office="LA">Los Angeles Office</div>

<div class="person Stockholm">Stockholm<br>Amanda Atkins</div>
<div class="person Stockholm">Stockholm<br>Benjamin Bovington</div>
<div class="person Denmark">Denmark<br>Carolyn Carson</div>
<div class="person LA">Los Angeles<br>Dave Duncan</div>
<div class="person LA">Los Angeles<br>Evelyn Edwards</div>

然后为具有类“office”的div添加一个悬停处理程序，该类将使用data-office属性来查找关联的人 - 或者在您的情况下找到与之无关的人以降低其不透明度：

$(document).ready(function() {
    $(".office").hover(function() {
        $(".person").not("." + $(this).attr("data-office")).fadeTo(100, 0.5);
    }, function() {
        $(".person").not("." + $(this).attr("data-office")).fadeTo(100, 1);
    });
});

演示：http://jsfiddle.net/EHrcb/

（“person”div也可以使用data-属性，但是按类选择更简单，这就是我的用法。）

我想您可以使用相同的概念为每个办公室显示相应的地图，但使用.hide()和.show()或设置可见性或其他设置，而不是设置不透明度。

请注意，您现有的html无效：您不应对多个元素使用相同的id。

Answer 2

使用jQuery的人的解决方案

您可以为任何元素添加多个类，以便您的人员添加一个代表城市的类，以及用于平移地图的数据属性（请参阅答案底部的最后一个编辑中的注释）

<div class="contact_office_people stockholm" data-map-coordinates="[ lat,lng]">

在办公室位置DIV为办公室添加html5 data-属性，可以使用jQuery data()方法轻松读取

<div class="contact_office_container" data-office="stockholm">

现在可以使用jQuery hover()

var $people=$('.contact_office_people');

$('.contact_office_container').hover(function(){
     /* this part of hover covers mouseenter event*/
     /* "this" is the current element behing hovered*/
      var peopleClassSelectorString = '.' + $(this).data('office') ; 
      $people.not( peopleClassSelectorString).css({opacity: .5});        


},function(){
    /* this part of hover covers mouseleave event*/
    $people.css({opacity: 1});
})

编辑：就谷歌地图而言，您可以将数据绑定到可以使用标记mouseenter / mouseleave事件检索的地图标记对象。一旦您消化了人员和办公室类的格式，您可能需要创建一个用谷歌地图标记的单独问题，以了解如何将数据添加到标记并使用事件检索它。

第二次修改：实际上地图并不难，可以使用谷歌地图panTo( coordinates)方法。我为这些添加了额外的data-属性。

请参阅google Maps API

在div悬停时更改div多个外观和内容

2 个答案: