有没有办法改变猫头鹰轮播的光标？ （不是猫头鹰点或猫头鹰导航）

Question

当鼠标进入猫头鹰轮播时，我一直试图将光标更改为图像，但是失败了，可能是因为我不擅长javascript / jQuery，所以尝试了CSS，我尝试将光标更改为{ {1}}类，然后是.owl-carousel，.owl-stage-outer和.owl-stage，但是没有用，然后我用另一个.owl-item包裹了整个轮播，并尝试更改其光标悬停，但这也不起作用。

我尝试了CSS div，但是没有用，不仅在stackoverflow中搜索，而且还搜索了Google的所有内容。

我在下面的代码段中附上了我尝试过的内容，请提供帮助，谢谢。

cursor: url(https://i.imgur.com/ZUjicmP.png), auto;

$(".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;}

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

我一直在寻找它不起作用的原因，最后，我明白了，它现在可以正常工作了。根据{{​​3}}-

中的 THIS ARTICLE ，图像大小是原因

光标大小的限制是128×128px。较大的光标图像是 忽略。

我在MDN Web Docs上找到了这篇文章，后来我看到了StackOverflow page。谢谢大家。