CSS Show active element above the div with overflow:hidden
Question
I have a scrolling pane div with overflow:hidden. Please check it here . There are products as images with captions shown in the scrolling pane. When I move mouse cursor over a product div, it gets light-yellow background and changes its height - I just add a class to the div using jQuery and it works fine. The problem I need to solve some way is to show the expanded div for the active product as a separate div that appears above the scrolling pane, though now it appears inside that pane and extends it in its height. I want to make it look in similar way to this one . Here you move mouse cursor over the product and get an extended div showing you details. Surely, my task is a little harder because of that scrolling pane.
1 answers
solution1
2 ACCPTED 2010-08-18 15:36:27
Shouldn't be too difficult if you use the .offset() method on hover of a .product . What you can do is the following:
- In your
.producthover event handler, get the offset of the product. This will give you the position of your product in relation to the document. - Next create your overlay product information div and append it directly to the
<body>. - Set the overlay div to position: absolute and use the values returned from the offset call to position it.
- Lastly make sure your overlay has a higher z-index than the scrolling pane and you should be in business.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.