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：

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

比下面的代码会更改光标

＆＃13;


docker exec yourcontainername mysql -u root -p

＆＃13;

Answer 2

现在我看到了你的例子。我无法看到使用现有功能的简单方法。现在你可以试试这个：

＆＃13;

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

＆＃13;

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

Answer 3

我认为最好的方法就是使用两个重叠的div并按照Yuri的建议将其移除。作为悬停事件不会写入难以检测的代码中。

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

基于光标位置的自定义光标更改 - Royalslider

3 个答案: