如果有人能幫助我，我真的很高興！

我正面臨一個(gè)問(wèn)題，我一直試圖解決，但還沒(méi)有找到滿意的解決方案。我在向更有見(jiàn)識(shí)的人尋求幫助。

我的目標(biāo)是使用一個(gè)自定義的光標(biāo)，它只是一個(gè)20px乘20px的黑點(diǎn)。迄今為止，我嘗試了兩種方法:

最初，我嘗試使用一個(gè)元素來(lái)表示自定義光標(biāo)并控制其行為。這個(gè)方法在過(guò)去對(duì)我有效，但是我現(xiàn)在使用的是一個(gè)可拖動(dòng)的滑動(dòng)條。遺憾的是，拖動(dòng)時(shí)，自定義光標(biāo)會(huì)跳到上一張幻燈片。

作為替代，我嘗試使用“cursor:URL(& quot；圖像& quot)' CSS屬性。雖然這種方法在技術(shù)上可行，但它缺少縮放光標(biāo)的選項(xiàng)。為了解決這個(gè)問(wèn)題，我將鼠標(biāo)懸停時(shí)的圖像改為一個(gè)更大的點(diǎn)。然而，這種轉(zhuǎn)變一點(diǎn)也不順利。

如果有人能提供幫助和指導(dǎo)，我將不勝感激。提前感謝。

以下是一些可能的解決方案:

一種方法是使用CSS cursor屬性和url()值，該值指向自定義光標(biāo)的圖像文件。您還可以指定光標(biāo)熱點(diǎn)的坐標(biāo)，即光標(biāo)內(nèi)所指向的點(diǎn)。例如:

.custom-cursor {
  cursor: url("black-dot.png") 10 10, auto;
}

這將在(10，10)像素處應(yīng)用帶有黑點(diǎn)圖像和熱點(diǎn)的自定義光標(biāo)。auto關(guān)鍵字是一個(gè)后備值，以防圖像加載失敗。

另一種選擇是使用JavaScript創(chuàng)建一個(gè)定制的光標(biāo)元素，并將其附加到鼠標(biāo)移動(dòng)事件。您也可以使用JavaScript隱藏默認(rèn)光標(biāo)，方法是將其樣式設(shè)置為none。例如:

// Get the custom cursor element
let cursor = document.getElementById('custom-cursor');

// Attach a mousemove event listener to the document
document.addEventListener("mousemove", function(e) {
  // Update the custom cursor position
  cursor.style.left = e.pageX - cursor.clientWidth / 2 + 'px';
  cursor.style.top = e.pageY - cursor.clientHeight / 2 + 'px';
});
// Disable dragging to prevent the not-allowed cursor 
document.addEventListener("dragstart", function(e) {
  e.preventDefault();
});
// Scaling
document.querySelectorAll('.big-cursor').forEach(function(ele) {
  ele.addEventListener("mouseenter", function(e) {
    cursor.style.transform = 'scale(2)';
  });
  ele.addEventListener("mouseleave", function(e) {
    if (e.relatedTarget && !e.relatedTarget.classList.contains('big-cursor')) {
      cursor.style.transform = 'scale(1)';
    }
  });
});

/* Hide the default cursor */

html {
  cursor: none;
}

.square {
  width: 200px;
  height: 200px;
  float: left;
  border: 1px solid;
  text-align: center;
}

#custom-cursor {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20'%3E%3Ccircle cx='10' cy='10' r='7' stroke='%2300000077' stroke-width='3' fill='%23000000' /%3E%3C/svg%3E");
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: transform 0.5s;
  pointer-events: none;
}

<div class="square big-cursor">This div has big cursor</div>
<div class="square">This div has normal cursor</div>
<div id="custom-cursor"></div>