title: Fancybox 3: Setting different cursors for left & right side of the slider
body: <p>I have set up the fancybox 3 plugin (<a href="http://fancyapps.com/fancybox/3/" rel="nofollow noreferrer">http://fancyapps.com/fancybox/3/</a>) for a website and am customising its appearance. I have changed the CSS of the arrows which the user can use to slide to the next/previous image so that the area which is clickable to slide to the next image covers 49% of the screen left and right, i.e. the user can always click either on the left or the right side of each image to slide to the next.</p>
  
  <p>Now I would like to set up custom cursors for each side of the slider as well; the right side should show a right pointing arrow, the left side a left pointing arrow. My current issue is that I cannot set the cursor for either side of the slider, only for the clickable area in general. How can I distinguish these two and set up a different slider for each?</p>
  
  <p>Here's the part of the <code>jquery.fancybox.css</code> which I have changed as well as a .gif showing the current version of it in action (I have coloured the clickable area green in order to make it more apparent):</p>
  
  <pre><code>/* Navigation arrows */
  
  .fancybox-arrow {
    position: absolute;
    top: 0;
    margin: 0 0 0 0;
    height: 100%;
    width: 49%;
    padding: 0;
    border: 0;
    outline: none;
    background: none;
    background-color: rgba(137, 255, 139, 0.4);
    cursor: pointer;
    z-index: 99995;
    opacity: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: opacity .25s; 
  }
  
  .fancybox-arrow:hover {
    cursor: -webkit-image-set(url(Cursor-Right.png) 1x, url(Cursor-Rightx2.png) 2x), pointer;
  }
  </code></pre>
  
  <p>In the .gif you can see the cursor changing to the right pointing arrow, but it is applied to both sides of the slider.</p>
  
  <p><a href="https://i.stack.imgur.com/Gzplw.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gzplw.gif" alt="enter image description here"></a></p>