Click through div to underlying elements

by

Yes, you CAN do this.

Using pointer-events: none along with CSS conditional statements for IE11 (does not work in IE10 or below), you can get a cross browser compatible solution for this problem.

Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks flow through to elements underneath.

CSS:

pointer-events: none;
background: url("https://stackoverflow.com/questions/3680429/your_transparent.png");

IE11 conditional:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://stackoverflow.com/questions/3680429/your_transparent.png", sizingMethod='scale');
background: none !important;

Here is a basic example page with all the code.

More Related Contents:

  1. How to remove the spaces between the form and the footer as shown below in the picture?
  2. Remove white space below image [duplicate]
  3. CSS – how to overflow from div to full width of screen
  4. Does Firefox support position: relative on table elements?
  5. CSS Child vs Descendant selectors
  6. Setting Element Width Based on Height Via CSS
  7. Nesting @media rules in CSS
  8. How can I center into a div?
  9. Text blended over background color
  10. Canvas has white space at the bottom and scrolls too far
  11. How to use ‘hover’ in CSS
  12. A grid layout with responsive squares
  13. Is it possible to create an angled corner in CSS?
  14. How to make CSS visible only for Opera
  15. Resize font-size according to div size [duplicate]
  16. Fixed sidebar navigation in fluid twitter bootstrap 2.0
  17. What does + mean in CSS? [duplicate]
  18. Float right and position absolute doesn’t work together
  19. Converting and rendering web fonts to base64 – keep original look
  20. Why doesn’t inset box-shadow work over images?
  21. Changing chunk background color in RMarkdown
  22. text-overflow ellipsis on flex child not working [duplicate]
  23. Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?
  24. Difference between flex-end and end? [duplicate]
  25. CSS text align justify big spaces
  26. flexbox vs tables, why do we need flexbox?
  27. Implement a CSS-only slideshow / carousel with next and previous buttons?
  28. Sass and rounding down numbers. Can this be configured?
  29. SASS calculate HSL Difference between 2 colours
  30. How to style menu button and menu items

Leave a Comment