How to turn mouse arrow into finger pointer on clickable background?

Question

I have a clickable two-part background wallpaper for my WordPress site. It works fine except for one thing: When hovering the mouse over the background, it remains an arrow instead of a finger pointer, so the reader has no clue that it's clickable.

I've tried all sorts of things in the script section, to no avail. When I've gotten the finger pointer to appear over the background, it also appears everywhere else on the page where you happen to hover, whether there's a hyperlink there or not.

Does anyone know how to get the finger pointer to appear over the background only?

<style>
body { 
background-image: url("/wp-content/uploads/2019/08/BottomBKG.png"), url("/wp-content/uploads/2019/08/TopBKG.png");
background-color: #000000;
background-repeat: no-repeat, no-repeat;
background-position: center bottom, center top;
background-size: 2000px 294px, 2000px 1368px;
background-attachment: fixed, scroll;
}
</style>

<script>
$('body').click(function(e){
var url = $(this).prop('href');
    if (e.target === this) {
      window.open('http://URLGOESHERE.com', '_blank');
    }
});
</script>

You would need to set the `cursor` still for the child elements of the body to default so they don't inherit the `cursor` style from `body` — Patrick Evans, Aug 17 '19 at 04:32

But those new buttons though.. · Answer 1 · 2019-08-17T06:19:44.103

0

You just need to set css cursor to pointer on the clickable element.

pointer: The cursor is a pointer that indicates a link. Typically an image of a pointing hand.

In your case I suggest moving your background image out of the <body> since setting cursor there can have an undesirable effect on the rest of the elements your page:

#background {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: green;
  cursor: pointer;
}

#content {
  margin: 20px auto;
  background: #fff;
  height: 100px;
  width: 100px;
  text-align: center;
  position: relative;
}

<div id="background"></div>
<div id="content"><a href="#">Anchor</a></div>

edited Aug 17 '19 at 06:19

answered Aug 17 '19 at 04:30

But those new buttons though..

21,377
10
81
108

In the CSS, append the element in question's name with `:hover`. – TRose Aug 17 '19 at 04:40
@TRose - "*The cursor CSS property sets the type of cursor, if any, to show when the mouse pointer is over an element.*" - i.e., the `cursor` property is only *ever* applied when you are hovering so it's not needed. – But those new buttons though.. Aug 17 '19 at 04:54
@billynoah The `body * {cursor:default }` did not work well. Hyperlinks I created within the `div` did not produce a pointer. However, I tried using `div {cursor: default}` and that did the trick! Thanks for setting me on the right track. – Joe Hudson Aug 17 '19 at 05:15
@JoeHudson - As we both discovered, setting cursor on the body leads to problems with other elements. Even with the rule you mentioned, anchor links will no longer have the pointer as they should and you end up needing to reset everything inside the body to the cursor that it should have. After playing around in the snippet a bit, my suggestion is to restructure things like I've done - put your background image in an absolutely positioned div with no child elements and then let everything else float on top of it. This way you can get the cursor style you want without affecting everything else. – But those new buttons though.. Aug 17 '19 at 06:08

How to turn mouse arrow into finger pointer on clickable background?

1 Answers1