如何将鼠标移到图像的一部分并显示表格&；链接到其他网页-HTML（CSS）

这更像是一个初学者提出的如何提问。我正在构建一个HTML5页面。我有一张照片，我想有三个鼠标悬停事件。在图像的1/3处，我想用一个黄色矩形鼠标悬停，如果您单击我需要它作为链接，它将填充右侧的信息。图像的第二个（2/3）部分将是一个红色鼠标悬停在矩形上，执行相同的操作。图像的第三个（3/3）部分将是一个绿色的鼠标覆盖矩形，执行相同的操作-在右侧填充信息，如果单击指向其他网页的链接

我不知道如何在图像的一部分上构建一个形状，这样我就可以鼠标悬停。我想在CSS中使用.hover来实现这一点，但我不知道是否可以

请帮忙

---

Heather

你要做的是设置一个以图像为背景的div，然后在div内放置3个锚定，锚定宽度为33%，悬停时使用不同的颜色。请参见下面的示例

div.picture{
宽度：300px；
高度：300px；
背景色：青色；
背景图像：url（/images/picture.png）
背景尺寸：100%100%
背景重复：无重复；
边框：1px纯黑；
}
图片a组{
显示：内联块；
宽度：33%；
身高：100%；
}
a、 黄色：悬停{
背景颜色：黄色；
}
a、 红色：悬停{
背景色：红色；
}
a、 绿色：悬停{
背景颜色：绿色；
}