CODEWITHSUNDEEP
javascriptjqueryhtmlcss
stamblerre
stamblerre

Reputation: 261

Make a link have not clickable padding but a clickable background image

I have a list of links with background images, and they all have padding which I do not want to be clickable. However, I would like to be able to click on the background images. Is it possible to enable pointer events on a background-image? I'm willing to do it through CSS or through JS.

For example: 

$(document).ready(function () {
    $("?????").click(function (e) {
        e.preventDefault();
        $("a span").css({"color":"green"});
    });
});

I have a function that is roughly something of this nature (but a bit more complicated) in jQuery, but I would like the click to only reference the background image, so I'm not really sure what to do.

Here's a demo of what I mean: http://jsfiddle.net/stamblerre/x7bdu/7/

In this case, I'd like to be able to click on the pencil image.

I've done something similar thing jQuery, but I'd like the mouse to look as though an area cannot be clicked, and my solution does not stop the mouse from changing, which is why I'm looking for an alternate means.

Thanks for your help!!

Upvotes: 0

Views: 138

Answers (1)

Michael
Michael

Reputation: 7384

Not sure if this is all you need, but to prevent the mouse from changing, you simply need to do 

a {
  cursor: default;
}

http://jsfiddle.net/michaelburtonray/x7bdu/11/

Upvotes: 1

Related Questions