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

Question

我正在使用Royalslider。 我有一个允许根据光标位置进行导航的功能。

}).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'
               });

              };
            });
           });

我如何修改此设置，以便光标在悬停时发生变化-不仅仅是单击之后。 谢谢

Answer 1

如果您通过javascript（jQuery）更改了CSS，就可以了。 对于我的解决方案，您可能需要在使用以下脚本之前在html中实现jQuery：

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

比下面的代码会更改光标

 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

现在，我看到了您的示例。 我看不到使用现有功能的简单方法。 现在，您可以尝试以下操作：

 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;" }); } }); 

我正在计算光标在X轴上的偏移位置。 现在，您可以检查光标是在站点的左侧还是右侧。 可以相应地更改光标。 希望有帮助！

Answer 3

我认为最好的方法就是使用两个重叠的div，并按照Yuri的建议将其移除。 由于悬停事件未写入代码中，因此很难检测到。

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