20

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/

user2534878
  • 229
  • 1
  • 2
  • 8
  • 1
    If you wrap the cover_button and the actual button in a container, you can bind the click to the parent container, and have it trigger the actual button click. If this is impossible for some reason, briefly hide the cover on click, get the element under it, and trigger it's click event. post a fiddle for more help. – Dom Day Jul 13 '13 at 04:42
  • I am not sure how to do that since the button is an iframe. Anyway here's the jsfiddle Clickable http://jsfiddle.net/3PXTK/1/ Hoverable http://jsfiddle.net/3PXTK/ – user2534878 Jul 13 '13 at 10:08
  • You are using an iFrame with content from another domain. You won't be able to manipulate this content without some serious effort. I'd suggest looking into jquery facebook like plugins – Dom Day Jul 13 '13 at 21:46
  • What if I don't manipulate the Iframe? I managed to keep the pointer-event:none, then detect the hover on #cover_like_button_holder iframe instead. That worked, I just don't know how to replace the background image now. Would that be possible with jQuery? Like, if #ElementB is hovered, change the background image on #ElementA. – user2534878 Jul 13 '13 at 22:26
  • in jQuery, that looks like `$('#elA').on('hover', function() { $('#elB').css('background-image', 'url(myHoverImage)'); }, function() { $('#elB').css('background-image', 'url(myImage)'); } );` , replacing `#elA #elB` with your element selectors, and `myHoverImage myImage` with the image urls – Dom Day Jul 13 '13 at 22:35
  • I am so thankful that you are helping me with this! The code looks like exactly what I need. However I couldn't get the javascript to work http://jsfiddle.net/3PXTK/2/ . But it should be able to detect the hover for #cover_like_button_holder as seen in this fiddle http://jsfiddle.net/3PXTK/4/ – user2534878 Jul 15 '13 at 01:04
  • 2
    Does this answer your question? [Is there a \`pointer-events:hoverOnly\` or similar in CSS?](https://stackoverflow.com/questions/22168420/is-there-a-pointer-eventshoveronly-or-similar-in-css) – Gajus Mar 05 '20 at 22:39

1 Answers1

2

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.

Community
  • 1
  • 1
Kinga
  • 386
  • 1
  • 8