CODEWITHSUNDEEP
jquerycsseventspointersclick
user2534878
user2534878

Reputation: 229

Keep Hover attribute with Pointer-event: none

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/

Upvotes: 20

Views: 12780

Answers (1)

Kinga
Kinga

Reputation: 386

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.

Upvotes: 2

Related Questions