如何将鼠标悬停在一个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