All geek questions in one place

CSS Show active element over div with overflow: hidden

I have a scrollbar with overflow: hidden. Please check here . There are products in the form of images with inscriptions displayed in the scroll area. When I move the mouse cursor over a div product, it gets a 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 is to show the extended div for the active product as a separate div that appears above the scroll area, although now it appears inside this panel and extends it in height. I want him to look just like this one . Here you move the mouse over the product and get an extended div showing the details. Of course, my task is a bit more complicated due to this scroll area.

+3
source share
1 answer

It should not be too complicated if you use the method . offset () on hover .product. You can do the following:

  • In your .producthover event handler, get the product offset. This will give you the position of your product regarding the document.
  • Then create your overlay product div and add it directly to <body>.
  • Set the overlay div to: absolute and use the values ​​returned from the offset call to place it.
  • Finally, make sure your overlay has a higher z index than the scroll area, and you should be in business.
+2

Source: https://habr.com/ru/post/1760331/

More articles:


All Articles