css - 如何仅将鼠标悬停在图像的一部分上并显示表格和指向另一个网页的链接 -HTML (CSS)

Question

这更像是初学者的提问方式。我正在构建一个 HTML5 页面。我有一张图片，我想要三个鼠标悬停事件。在图像的 1/3 上，我想将鼠标悬停在一个黄色矩形上，它将在右侧填充信息，如果您单击我需要它作为链接。图像的第二个 (2/3) 将是一个红色的鼠标悬停矩形，执行相同的操作。图像的第三 (3/3) 将是一个绿色的鼠标悬停矩形，做同样的事情 - 在右侧填充信息，如果您单击指向另一个网页的链接。

我不知道如何在图像的一部分上构建形状以便我可以将鼠标悬停。我想在带有 a.hover 的 CSS 中执行此操作，但我不知道是否可以。

请帮助。

希瑟

Answer 1

您要做的是将图像设置为背景的 div，然后在 div 中放置 3 个宽度为 33% 且悬停时颜色不同的 anchor 。请参阅下面的示例。

div.picture { 
  width: 300px;
  height: 300px; 
  background-color: cyan;
 background-image: url(/images/picture.png)
   background-size: 100% 100%
   background-repeat: no-repeat;
border: 1px solid black;
}

div.picture a {
  display: inline-block;
  width: 33%;
  height: 100%;
}

a.yellow:hover {
  background-color: yellow;
}
a.red:hover {
  background-color: red;
}
a.green:hover {
  background-color:green;
}

<div class="picture">
  <a class="yellow" href="/link1.html" />
  <a class="red" href="/link2.html" />
  <a class="green" href="/link3.html" />
</div>