当您将鼠标悬停在特定区域上时，如何显示下拉菜单？ （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; }