光标位置进行自定义光标更改-Royalslider

Question

I'm using royalslider. I have a function which allows navigation depending on cursor position.

}).data('royalSlider');
           slider.ev.on('rsSlideClick', function(e, origEvent) {
           var width = jQuery('.royalSlider').data('royalSlider').width;

           if (origEvent.pageX < (width/2)) {
                slider.prev();
                $('.rsOverflow').css({
                      'cursor': 'url(images/prevg.png), default'
           });

                } else {
                slider.next();
                $('.rsOverflow').css({
                       'cursor': 'url(images/nextg.png), default'
               });

              };
            });
           });

How can I modify this so that cursors change on hover - not just after click. Thanks

Answer 1

That would work if you change the css at that point trough javascript (jQuery). For my solution you would hav to implement jQuery in your html before you use your following script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Than the code below would change the cursor

 var slider = $('#full-width-slider').royalSlider({ autoHeight: true, ///// more options ///// navigateByClick: false, prefix: 'image-' }, }).data('royalSlider'); slider.ev.on('rsSlideClick', function(e, origEvent) { var width = jQuery('.royalSlider').data('royalSlider').width; if (origEvent.pageX < (width/2)) { slider.prev(); // change css to prevg.png $('.rsOverflow').css({ "cursor" : "url('images/prevg.png'), auto !important;" }); } else { slider.next(); // change css to nextg.png $('.rsOverflow').css({ "cursor" : "url('images/nextg.png'), auto !important;" }); }; }); }); 

Answer 2

Now that I saw your Example. I can't see a simple way of using the existing functions. Now you could try this:

 var mContainer = $('body'), left = $(window).width() / 2, x, y; $(window).mousemove(function(evt){ x = (evt.pageX - mContainer.offset().left) + $(window).scrollLeft(); if(x < left) { $('.rsOverflow').css({ "cursor" : "url('images/prevg.png'), auto !important;" }); } else { $('.rsOverflow').css({ "cursor" : "url('images/nextg.png'), auto !important;" }); } }); 

I am calculating the offset position of the cursor on the X-Axis. Now you can check if the cursor is on the left part of the site or on the right part. An can change the cursor accordingly. Hope that helps!

Answer 3

I believe the best way is just to use two overlaying divs and remove them on touch as Yuri suggested. As the hover event is not written into the code its difficult to detect.

<script type="text/javascript">
jQuery(function($){
if(typeof ontouchstart !== 'undefined'){
    $('.prev1, .next1').remove();
}
});
</script>