如何将鼠标悬停在一个div上以触发另一个div的更改？

Question

我希望为我的下一个网站创建下一个效果：

1. 我有3个DIV，左栏中有一些文字内容。
2. 我在右栏中的div中有一个图像。
3. 右侧div中的图像有3个不同的独立图像部分，当我将鼠标悬停在左侧列中的一个div（与该特定图像部分相关）上时，每个单独的部分都必须突出显示。我在悬停的DIV也必须在悬停时突出显示。
4. 当我将鼠标悬停在右栏中的DIV中的任何图像部分上时，我也想要同样的效果。我希望它突出显示相关的div，以及突出显示图像部分本身。

我知道这一切听起来真的很混乱，所以我拍了一张照片，希望能直观地解释我的项目。 （查看附图）。

现在我不确定这是否可以仅使用CSS，或者通过CSS和jQuery或smn的组合来实现。

如果有人遇到类似的实现，或者知道我在哪里可以找到代码示例，或者可以指引我朝着正确的方向发展，我会非常感激!!!“

Answer 1

您可以在大陆图片上设置鼠标悬停绑定，并在左侧设置相应的div：

$('.div1').mouseover(hoverOne);
$('.continent1').mouseover(hoverOne);
var hoverOne = function(){
    //hightlight elements
}

//lather...rinse...repeat for the rest

Answer 2

这样的事情应该有效。请参阅http://jsfiddle.net/neo108/fCsNN/。

只需在mouseout和mouseover函数中为地图中的相关部分指定div。