css 光标手型_快速提示：如何使用CSS操纵光标外观

最新推荐文章于 2024-02-02 13:59:47 发布

daique1908

最新推荐文章于 2024-02-02 13:59:47 发布

阅读量312

点赞数

文章标签： css javascript java python js ViewUI

css 光标手型

在此快速提示中，我们将学习如何使用CSS自定义光标外观。我们将把光标更改为箭头，以使幻灯片浏览更容易。为了更好地理解它，我们将逐步介绍两个示例。

注意：本文的目的不是详尽地介绍cursor属性的语法。要进行更彻底的检查，请确保在本教程末尾检查资源。

例子1

对于第一个示例，我们将讨论如何根据鼠标位置更改光标图像。

这是我们将要构建的演示：

1. HTML

我们从一个简单的图像开始：

<img src="IMG_SRC" alt="">

2. CSS

接下来，我们定义两个保存光标图像CSS类：

.cursor-prev {
  cursor: url(cursor-prev.cur), auto; /*IE & Edge*/
  cursor: url(cursor-prev.svg) 16 16, auto; /*Rest browsers*/
}

.cursor-next {
  cursor: url(cursor-next.cur), auto; /*IE & Edge*/
  cursor: url(cursor-next.svg) 16 16, auto; /*Rest browsers*/
}

注意，对于每个规则，我们指定两个游标声明。每个规则的第一个声明都针对Microsoft的浏览器，而第二个声明则针对其他浏览器。所有值都指向图像，而auto关键字值作为后备。

值得一提的是，我们可以指定多个自定义URL或图像。浏览器将尝试根据值中定义的顺序加载它们。换句话说，最初它将尝试加载第一张图像。如果由于某种原因该图像不可用，它将尝试加载第二个图像，依此类推。最后，如果不存在任何图像，将使用fallback关键字。

在继续之前，让我们重点介绍一些当前的限制（也根据我的测试），并解释为什么我们设置两个单独的声明：

Microsoft的浏览器仅支持CUR和ANI作为格式。
Microsoft的浏览器不允许设置光标图像的原点。如果发生这种情况，将忽略光标图像和属性的其余部分。在本例中，对于非Microsoft浏览器，我们将图像原点设置为中心（图像为32x32）。

3. JavaScript

当所有页面资产准备就绪时，将执行init函数。

在该函数内部，我们首先获取图像宽度。

接下来，每次将鼠标悬停在图像上时，我们都会执行以下操作：

获取鼠标指针相对于图像（而不是相对于浏览器窗口）的X坐标。
从图像中删除所有类。
根据鼠标位置将适当的类添加到图像。如果鼠标位置超过图像宽度的一半，我们将添加cursor-next类，否则将添加cursor-prev类。

负责所有此行为的代码如下：

window.addEventListener("load", init);

function init() {
  const img = document.querySelector("img");
  const {width} = img.getBoundingClientRect();
  const halfImgWidth = width / 2;

  img.addEventListener("mousemove", function(e) {
    const xPos = e.pageX - img.offsetLeft;
    this.classList.remove("cursor-prev", "cursor-next");
    if (xPos > halfImgWidth) {
      this.classList.add("cursor-next");
    } else {
      this.classList.add("cursor-prev");
    }
  });
}

范例＃2

对于第二个示例，我们将使用上一篇文章中构建的演示。看一看：

在这里，导航箭头的位置和外观如下所示：

让我们对其进行自定义，以便于导航。每个箭头应覆盖转盘宽度的一半，并且其高度应等于转盘高度。另外，我们将利用cursor属性设置箭头的图标。

这是必需CSS：

.owl-carousel .owl-nav [class*=owl-] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  margin: 0;
}

.owl-carousel .owl-nav .owl-prev {
  left: 0;
  cursor: url(cursor-prev.cur), move;
  cursor: url(cursor-prev.svg) 16 16, move;
}

.owl-carousel .owl-nav .owl-next {
  right: 0;
  cursor: url(cursor-next.cur), move;
  cursor: url(cursor-next.svg) 16 16, move;
}

.owl-carousel .owl-nav svg {
  display: none;
}

请注意，光标图像来自我们先前的示例。唯一的区别是，在无法加载关联的图片的情况下，我们将move关键字值指定为后备广告。

结果如下：