Search code examples
javascriptjqueryhtmlcsspositioning

Rollover popup based on mouse click location

I need a rollover popup based on mouse click location (I cannot exactly use a CSS absolute positionined div inside a relative one for this, since that kind of crops my popup...reason being I have overflow:hidden for layout purpose)

So I cannot use this;

<div class="wrapper">
    <ul class="popup"><li> item 1</li><li> item 2</li></ul>
    <img src="someImg.gif" width="100" height="100"/>
</div>

.wrapper {
    position: relative;
}

.popup {
    display: none;
    position: absolute;
    bottom: 105px;
    left: 10px;
}

.wrapper:hover .popup {
    display: block;
}

enter image description here

So can I get something based on mouse cursor location and it should be completely fluid (no fixed "px" value and should adjust as the browser is resized)

Thank you.

Solution

  • well u are on the right way to prevent the cropping of pop up give the class css z-index of a 1000+ value n d class wrapper a z-index of less or -1 value