悬停中的文本会在鼠标所在位置改变颜色-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

悬停中的文本会在鼠标所在位置改变颜色

P粉697408921 2024-03-28 14:12:45

[HTML讨论组]

707

如何仅更改鼠标所在位置的文本颜色而不是所有文本的颜色？像这样

我希望您可以看到的圆圈跟随鼠标移动，并且在悬停时文本仅显示悬停中的字母部分的边框

我需要有关我需要使用哪个库或函数的建议？

P粉697408921

全部回复(1)

P粉9365685332024-03-29 12:26:14 1楼

const fx = document.querySelector(".fx");

document.addEventListener("pointermove", e => {
  fx.style.top = e.clientY + "px";
  fx.style.left = e.clientX + "px";
  fx.querySelector("h1").style.transform = `translate(${(e.clientX - fx.getBoundingClientRect().width / 2) * -1}px, ${(e.clientY - fx.getBoundingClientRect().height / 2) * -1}px)`;
})

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

.container {
  position: relative;
}

.container h1 {
  font-size: 10rem;
  color: red;
}

.container .fx {
  width: 100px;
  height: 100px;
  outline: 1px solid blue;
  border-radius: 50%;
  position: absolute;
  top: -100px;
  left: -100px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  background-color: white;
}

.container .fx h1 {
  font-size: 10rem;
  color: transparent;
  -webkit-text-stroke: 2px green;
  cursor: default;
  position: relative;
}


  abc
  
    abc

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>