Keep Hover attribute with Pointer-event: none
click, css, events, jquery, pointers
Solution
You cannot not have a cookie and eat a cookie. First you have to understand how pointer events works:
none prevents all click, state and cursor options on the specified HTML element
That means no click, no hover, no active - nothing with cursor. You can not say ok, I just want hover and nothing else.
BTW. FB do it like this because they don't allow any changes in like button. You cannot change a look, cover it etc.
Problem
I have a button underneath a background image. To make the button clickable, I added a "pointer-event: none". However, I also want a sprite image, where I change the background image on hover, which the pointer-event also disables. Is there a way to keep the hover attribute of an element, while making clicks go through it? I searched and tried jquery unbind click and returne false when #cover_button is clicked, but it didn't work. Here's my code. If I keep the pointer-event: none I can click the button underneath my background image. But that would disable the hover attribute. If I remove it I won't be able to click. ``` #cover_button { pointer-event: none; position: absolute; width: 46px; height: 24px; left: 0; top: 0; background: url(http://s13.postimg.org/bqxlnbfs3/Like.png); } #cover_button:hover { background: url(http://www.moronacity.com/tech-journal/images/2011/February/small-Facebook-like-button-counter.gif); } ``` Edit: Here's a fiddle: Clickable but not hoverable http://jsfiddle.net/3PXTK/1/ Here's another: Hoverable but not clickable (I just removed the pointer-events: none) http://jsfiddle.net/3PXTK/