Question

I need to create an area on-screen that is interactive, with the hit area larger than the interactive element. However, I don’t want the hit area to impact the DOM layout.

This jsfiddle demonstrates what I’m after. A DOM inspector shows that #hitArea extends above and below #content, but it’s not interactive because it’s clipped by its parent element, #container, with overflow:hidden.

Answer 1

Figured it out as I was writing up the question, so I’m documenting it here.

overflow:hidden clips the interactive area (aka “hit area”) as well as the visible area, so it’s defeating the purpose here. Commenting out overflow:hidden and setting background-color: none on #hitArea allows the hit area to extend beyond the visible bounds of the element (#content).

http://jsfiddle.net/5vzJb/14/

In my case, I need to clip the content, so I can apply overflow:hidden to #content instead, and append my content as divs within #content.