Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS pointer-events='none' and/or XUL mousethrough='always' in web pages for Firefox
    primarykey
    data
    text
    <p>Very recently I asked <a href="https://stackoverflow.com/questions/1737480/passing-mouse-clicks-through-an-overlaying-element-div">this question</a> on how to pass clicks <strong>through</strong> an element (e.g. full screen overlaying ). Received some good advice, but I still wondered which browsers supported this natively...</p> <p>For those skipping the previous link, the overlay is purely cosmetic, <strong>must</strong> be overlayed and should ignore clicks (all mouse events should pass right through it)... <br /><br /></p> <p>So far, I've only managed to get this working with WebKit browsers.</p> <p><strong>Works (Chrome and Safari 4): -</strong><br /> <code>&lt;image src='./images/75/75.overlay.blood.png' width='100%' height='100%' style='z-index: 3; position: absolute; top: 0; left: 0; <strong>pointer-events: none;</strong>' /&gt;</code><br /><br /></p> <p>Firefox is known to support pointer-events with SVGs (and with <a href="https://developer.mozilla.org/en/CSS/pointer-events" rel="nofollow noreferrer">other HTML elements in 3.6</a>); problem is, I can't seem to get this to work with an SVG (e.g. <code>xlink:href="overlay.24bit.8alpha.png"</code>).<br /><br /></p> <p>Another way I hoped this could be achieved was by using <a href="http://www.hevanet.com/acorbin/xul/top.xul" rel="nofollow noreferrer" title="View in Firefox">XUL in HTML</a>.</p> <p>I'm hoping to use the attribute <code>mousethrough="always"</code> on the overlay (<code>&lt;image&gt;</code>, etc). Not working as of yet...<br /><br /></p> <p>Oddly enough, Internet Explorer treats alpha opacity PNGs transparent areas as "click through" which is handy.</p> <p>Any other good (or simple yet hackky) ways to achieve this in Firefox (3+). Pondered a Flash overlay with <code>wmode="transparent"</code> (fail).</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload