有没有办法改变猫头鹰旋转木马的光标？（不是猫头鹰点或猫头鹰导航）

Question

我一直试图在鼠标进入 owl-carousel 时将光标更改为图像但失败了，也许是因为我不擅长 javascript/jQuery，所以我尝试了 CSS，我尝试更改类的光标，.owl-carousel然后.owl-stage-outer，.owl-stage& .owl-item，但不起作用，然后我用另一个包裹整个轮播div，并尝试在悬停时更改其光标，但这也不起作用。

我尝试过CSS，cursor: url(https://i.imgur.com/ZUjicmP.png), auto;但没有成功，不仅在stackoverflow中搜索，而且还从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 {&nbsp; &nbsp; cursor: url(https://i.stack.imgur.com/VTE97.png),auto;&nbsp; &nbsp; overflow-x: hidden;}$(".owl-carousel").owlCarousel();.item {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; background: #000;&nbsp; margin: 15px;&nbsp; color: #fff;&nbsp; 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">&nbsp; <div class="owl-carousel">&nbsp; &nbsp; <div class="item">0-1</div>&nbsp; &nbsp; <div class="item">0-2</div>&nbsp; &nbsp; <div class="item">0-3</div>&nbsp; &nbsp; <div class="item">0-4</div>&nbsp; &nbsp; <div class="item">0-5</div>&nbsp; &nbsp; <div class="item">0-6</div>&nbsp; </div></div>

Answer 2

我一直在寻找它不起作用的原因，最后我明白了，现在它工作得很好。光标尺寸限制为128×128px。较大的光标图像将被忽略。

Answer 3

如果这也与拖放光标有关。您可能想要修改 owl-carousel 的样式，特别是.owl-drag和.owl-grab类。只需确保添加父<div>类⁠ - 例如parent-div 在其之前仅应用该父类内部的修改<div>。这个对我有用。.parent-div .owl-carousel.owl-theme.tour-packages-slider.owl-loaded.owl-drag {&nbsp; &nbsp; cursor: grab;}.parent-div .owl-carousel.owl-theme.tour-packages-slider.owl-loaded.owl-grab {&nbsp; &nbsp; cursor: grabbing;}