有没有办法改变 owl-carousel 的光标？ （不是 owl-点或 owl-导航）

Question

我一直试图在鼠标进入owl-轮播时将光标更改为图像但失败了，也许是因为我不擅长javascript/jQuery，所以我尝试了CSS，我尝试将光标更改为 .owl-carousel class，然后 .owl-stage-outer，.owl-stage & .owl-item，但没有用，然后我换行整个旋转木马与另一个 div 并试图在悬停时更改其光标，但这也没有用。

我试过 CSS cursor: url(https://i.imgur.com/ZUjicmP.png), auto; 但没有用，不仅在 Whosebug 中搜索，而且在 google.

中的任何地方都可以搜索

我在下面的片段中附上了我尝试过的内容，请帮忙，在此先感谢。

$(".owl-carousel").owlCarousel();

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  margin: 15px;
  color: #fff;
  height: 150px;
}

/*.owl-carousel {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}*/
/*.owl-stage-outer {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}*/
/*.owl-stage {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}*/
/*.owl-item {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}*/

.carousel-wrapper:hover {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="carousel-wrapper">
  <div class="owl-carousel">
    <div class="item">0-1</div>
    <div class="item">0-2</div>
    <div class="item">0-3</div>
    <div class="item">0-4</div>
    <div class="item">0-5</div>
    <div class="item">0-6</div>
  </div>
</div>

Answer 1

使用这个CSS

.carousel-wrapper {
    cursor: url(https://i.stack.imgur.com/VTE97.png),auto;
    overflow-x: hidden;
}

$(".owl-carousel").owlCarousel();

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  margin: 15px;
  color: #fff;
  height: 150px;
}

/*.owl-carousel {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}*/
/*.owl-stage-outer {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}*/
/*.owl-stage {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}*/
/*.owl-item {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}*/

.carousel-wrapper {
cursor: url(https://i.stack.imgur.com/VTE97.png),auto;
overflow-x: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="carousel-wrapper">
  <div class="owl-carousel">
    <div class="item">0-1</div>
    <div class="item">0-2</div>
    <div class="item">0-3</div>
    <div class="item">0-4</div>
    <div class="item">0-5</div>
    <div class="item">0-6</div>
  </div>
</div>

Answer 2

我一直在寻找它不工作的原因，终于找到了，现在工作正常。根据 THIS ARTICLE of MDN Web Docs-

，图像大小是原因

the limit of the cursor size is 128×128px. Larger cursor images are ignored.

我在 Whosebug page, and later I saw 上找到了这篇文章。感谢大家。