CODEWITHSUNDEEP
javascripthtmlcssimagedropdown
Alexandria
Alexandria

Reputation: 11

How to show a dropdown when you hover over a specific area an on image? (HTML, CSS)

Is it possible to show a dropdown whenever you hover over some specific area on an image? For example, if my mouse is within 50,62 and 70,80. I already tried this with invisible boxes and divs, but the only way I could get them to overlay the image was with position properties, but they wouldn't stay in place if I reshaped or resized the screen. Any ideas?

Upvotes: 0

Views: 156

Answers (2)

Devansh J
Devansh J

Reputation: 4194

Demo : http://jsfiddle.net/v8dp91jL/12/

The code is pretty self-explanatory. Just two imp things:

  1. Everything should be in %
  2. the .dropdown is inside .hover-area so that when you move your mouse from .hover-area to .dropdown, .dropdown doesn't disappear because it is still technically inside .hover-area even tho it's visually not

Upvotes: 1

mpetrov
mpetrov

Reputation: 391

You can add some hidden element (span) positioned on some specific area and it is going to trigger the hover:

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; }

Upvotes: 0

Related Questions