Javascript 只有当另一个元素悬停在上方时，我才能更改光标的样式

发布于11月24日

我正在try 编写一个定制的光标，当悬停在某些元素上时，它会改变其样式.

如我的代码所示，我试图定义一个函数，该函数在将光标悬停在div上时更改光标的样式，并使用<div id="control" onmouseover="cursorFill()></div>"对其进行调用.我本以为光标在悬停时会改变，一旦它不再位于div上方，就会变回原来的状态，但实际上它改变了，没有变回原来的状态.

如果可能的话，我更喜欢使用普通的JavaScript(没有jQuery或其他扩展).

const cursor = document.querySelector('#cursor');
document.addEventListener('mousemove', (e) => {
  cursor.style.left = e.pageX + 'px';
  cursor.style.top = e.pageY + 'px';
})

function cursorFill() {
  document.getElementById("cursor").style.backgroundColor = "#fff";
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: none;
}

body {
  background-color: #000;
  align-items: center;
  justify-content: center;
  display: flex;
}

#cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 5px solid #fff;
  background-color: transparent;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: difference;
}

#control {
  background-color: #fff;
  width: 10em;
  height: 10em;
  margin-top: 50vh;
}

<div id="cursor"></div>
<div id="control" onmouseover="cursorFill()"></div>

const cursor = document.querySelector('#cursor'); const control = document.querySelector('#control'); document.addEventListener('mousemove', (e) => { cursor.style.left = e.pageX + 'px'; cursor.style.top = e.pageY + 'px'; }) control.addEventListener('mouseenter', () => cursor.classList.add('over')); control.addEventListener('mouseleave', () => cursor.classList.remove('over'));

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; } body { background-color: #000; align-items: center; justify-content: center; display: flex; } #cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; border: 5px solid #fff; background-color: transparent; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: difference; } #cursor.over { background-color: #FFF; } #control { background-color: #fff; width: 10em; height: 10em; margin-top: 50vh; }

Javascript 只有当另一个元素悬停在上方时，我才能更改光标的样式

推荐答案

Javascript相关问答推荐

promise .all()永不解决

为什么我达到了时间限制！？LeetCode链接列表循环(已解决，但需要解释！)

如何在不分配整个数组的情况下修改包含数组的行为主体？

使用json文件字符串来enum显示类型字符串无法按照计算的enum成员值的要求分配给类型号

jQuery提交按钮重新加载页面，即使在WordPress中使用preventDefault()

在服务器上放置了Create Reaction App Build之后的空白页面

空的结果抓取网站与Fetch和Cheerio

Chromium会将URL与JS一起传递到V8吗？

获取Uint8ClampedArray中像素数组的宽度/高度

我的角模板订阅后不刷新'

我正在建立一个基于文本的游戏在react ，我是从JS转换.我怎样才能使变量变呢？

使用ThreeJ渲染的形状具有抖动/模糊的边缘

如何在每次单击按钮时重新加载HighChart/设置HighChart动画？

在数组中查找重叠对象并仅返回那些重叠对象

400 bad request error posting through node-fetch

如何在Node.js中排除导出的JS文件

如何在DYGRAPS中更改鼠标事件和键盘输入

打字脚本中方括号符号属性访问和拾取实用程序的区别

在Odoo中如何以编程方式在POS中添加产品

使用API调用的VUE 3键盘输入同步问题