當您將鼠標懸停在特定區域上時，如何顯示下拉菜單？ （HTML，CSS）

Question

將鼠標懸停在圖像上的某些特定區域上時，是否可以顯示下拉菜單？ 例如，如果我的鼠標在50,62和70,80之間。 我已經使用不可見的框和div進行了嘗試，但是我可以使它們覆蓋圖像的唯一方法是使用位置屬性，但是如果我調整屏幕的形狀或尺寸，它們將不會留在原地。 有任何想法嗎？

Answer 1

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

該代碼非常不言自明。 只是兩個小事：

1. 一切都應該以％
2. .dropdown位於.hover-area因此，當您將鼠標從.hover-area移至.dropdown ， .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; }