Как показать выпадающий список при наведении курсора на определенную область на изображении? (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; }