当您将鼠标悬停在特定区域和图像上时如何显示下拉列表?(HTML，CSS)

Question

每当您将鼠标悬停在图像上的某个特定区域上时，是否可以显示下拉列表？例如，如果我的鼠标在 50,62 和 70,80 之间。我已经用不可见的框和div 尝试过这个，但我可以让它们覆盖图像的唯一方法是使用位置属性，但如果我重塑或调整屏幕大小，它们不会留在原位。有什么想法吗？

Answer 1

演示 ： http://jsfiddle.net/v8dp91jL/12/

代码非常不言自明。 只是两件小事：

1. 一切都应该以 % 为单位
2. .dropdown位于.hover-area内部，因此当您将鼠标从.hover-area移动到.dropdown时，.dropdown不会消失，因为它在技术上仍然在里面.hover-area即使它在视觉上不是

Answer 2

您可以添加一些隐藏元素(span(放置在某个特定区域，它将触发悬停：

.HTML：

<div class="image-wrapper">
<span class="image-hover-trigger"></span>
<img src="..." >
<div class="dropdown"></div>
</div>

.CSS：

.image-wrapper { position: relative; }
.image-hover-trigger { position: absolute; top: 20%; left: 20%; right: 20%; bottom: 20%; }
.dropdown { display: none; }
.image-hover-trigger:hover ~ .dropdown { display: block; }