1

I'm unsure of the right terminology here, but basically I have a custom cursor that's like a carousel arrow (see the fiddle) that needs to appear when you hover over a div, but it also needs to change when hovering over the button inside said div.

#area {
  width: 300px;
  height: 200px;
  margin: auto;
  padding: 10px;
  background-color: skyblue;
  cursor: url( 'https://anaegm-canvas.000webhostapp.com/carousel-arrow-left.cur' ), move;
}

button {
  margin-top: 70px;
  margin-left: 100px;
  height: 25px;
}
<div id="area">
  Hover over me
  <button>
This is a button
</button>
</div>

https://jsfiddle.net/anaegm/397qe4n4/

While this technically works, the problem is the "focus" of this new cursor. In Chrome and Firefox it seems like the upper left corner is the focus (hovering the cursor so that the arrow is right in the middle of the button will not change the cursor to 'pointer', and as soon as any corner of the cursor leaves the blue container it changes back to normal), whereas in Internet Explorer the "focus" seems to be the tip of the arrow (you can see this by double clicking the "Hover over me text" with the tip, which can't be done on Chrome, as well as that the cursor changes to normal till the tip of the arrow is out of the blue container).

So my question is, is there any way I can set what the point of focus is for a .cur file? I'd prefer if it would behave in all browsers like it currently does for IE.

I should mention that this file in particular was created with an online converter, the original file was a .png image.

hungerstar
  • 21,206
  • 6
  • 50
  • 59
Ana Ameer
  • 671
  • 11
  • 30
  • 3
    You can supply an `x` and `y` offset after providing a `url`, so something like `cursor: url( 'https://anaegm-canvas.000webhostapp.com/carousel-arrow-left.cur' ) 0 35, auto;` – hungerstar Apr 06 '17 at 20:10
  • I feel silly now for not scrolling down a bit further on the documentation. Thanks! – Ana Ameer Apr 06 '17 at 20:12

0 Answers0