有没有办法改变owl-carousel的光标？ （不是 owl-dots 或 owl-nav）

Posted 2023-05-09

【中文标题】有没有办法改变owl-carousel的光标？ （不是 owl-dots 或 owl-nav）

【英文标题】：Is there a way to change the cursor of owl-carousel? (not owl-dots or owl-nav)

【发布时间】：2021-02-18 02:37:14

【问题描述】：

我一直试图在鼠标进入owl-carousel时将光标改为图片但失败了，可能是因为我不擅长javascript/jQuery，所以我尝试了CSS，我尝试将光标更改为@ 987654322@ 类，然后是 .owl-stage-outer，.owl-stage 和 .owl-item，但没有用，然后我用另一个 div 包裹了整个轮播，并尝试在悬停时更改其光标，但这也没有用.

我尝试了 CSS cursor: url(https://i.imgur.com/ZUjicmP.png), auto; 但没有用，并且不仅在 *** 中进行了搜索，而且还从 google 搜索了所有可能的地方。

我在下面的sn-p中附上了我尝试过的东西，请帮忙，提前谢谢。

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

【问题讨论】：

这能回答你的问题吗？ Using external images for CSS custom cursors

不，@SaraStoimenovska 我试过这不起作用

【参考方案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>

【讨论】：

谢谢，但是如果我下药了，自定义光标就会消失，而且它在这里工作但在我的浏览器中不起作用，我不知道为什么。

您需要阅读此文档w3.org/TR/CSS21/ui.html#propdef-cursor

【参考方案2】：

我一直在寻找它不工作的原因，最后，我得到了它，现在它工作正常。图片大小是原因，根据MDN Web Docs的THIS ARTICLE-

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

我在这个*** page上找到了这篇文章，后来又看到了another page with the same solution。谢谢大家。