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

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 {

    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

我一直在寻找它不起作用的原因，最后我明白了，现在它工作得很好。

光标尺寸限制为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 {

    cursor: grab;

}

.parent-div .owl-carousel.owl-theme.tour-packages-slider.owl-loaded.owl-grab {

    cursor: grabbing;

}