क्या उल्लू-हिंडोला के कर्सर को बदलने का कोई तरीका है? (उल्लू-डॉट्स या उल्लू-नौसेना नहीं)

Question

जब माउस उल्लू-हिंडोला में प्रवेश करता है तो मैं कर्सर को एक छवि में बदलने की कोशिश कर रहा हूं, लेकिन असफल रहा, शायद ऐसा इसलिए है क्योंकि मैं जावास्क्रिप्ट/jQuery में अच्छा नहीं हूं, इसलिए मैंने सीएसएस की कोशिश की, मैंने कर्सर को के लिए बदलने की कोशिश की। owl-carousel वर्ग, फिर .owl-stage-outer, .owl-stage और .owl-item, लेकिन नहीं किया काम नहीं किया, फिर मैंने पूरे हिंडोला को दूसरे div से लपेट दिया और होवर पर इसके कर्सर को बदलने की कोशिश की, लेकिन वह भी काम नहीं किया।

मैंने सीएसएस cursor: url(https://i.imgur.com/ZUjicmP.png), auto; की कोशिश की है, लेकिन काम नहीं किया, और न केवल स्टैक ओवरफ्लो में, बल्कि हर जगह 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>

javascript jquery css jquery-plugins owl-carousel

0

Tanim 5 नवम्बर 2020, 14:34

Answer 1

मैं इसका कारण ढूंढ रहा हूं कि यह काम क्यों नहीं कर रहा है, और आखिरकार, मुझे मिल गया, और यह अब ठीक काम कर रहा है। यह लेख का MDN वेब डॉक्स-

कर्सर आकार की सीमा 128×128px है। बड़ी कर्सर छवियों को अनदेखा कर दिया जाता है।

मुझे यह लेख इस StackOverflow पेज पर मिला, और बाद में मैंने उसी समाधान वाला दूसरा पृष्ठ देखा। सभी को धन्यवाद।

0

Tanim 13 नवम्बर 2020, 21:26

Answer 2

इस सीएसएस का प्रयोग करें

.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>

1

Aman 5 नवम्बर 2020, 14:54

क्या उल्लू-हिंडोला के कर्सर को बदलने का कोई तरीका है? (उल्लू-डॉट्स या उल्लू-नौसेना नहीं)

2 जवाब

संबंधित सवाल

जुड़े हुए प्रश्न

नए सवाल