如何使光标跟随器在悬停此元素时与另一个div的位置/大小相同

eaf3rand  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(272)

我有一个光标元素,它跟随鼠标的x和y位置。但一旦它悬停在菜单的文本元素上,我希望这个光标跟随器的大小和位置发生变化。
大小=悬停文本的偏移宽度和高度位置=保持悬停文本的偏移y和x,并且仅在悬停时。
到目前为止,我有这个,但我相信它不起作用。有没有关于我应该如何继续的建议?谢谢你的好话!

let cursor = document.querySelector('.cursorFollower');

let button = document.querySelector('.superText');
let buttonWidth = button.offsetWidth;
let buttonHeight = button.offsetHeight;
let buttonX = button.offsetLeft;
let buttonY = button.offsetTop;

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

button.onmouseover = function(){
  button.setAttribute("style", "color: #84C4B5;");
  cursor.style.transform = 'rotate(0deg)';
  cursor.style.width = buttonWidth + 'px';
  cursor.style.height = buttonHeight + 'px';
  cursor.style.top = buttonY + 'px';
};

button.onmouseout = function(){
  button.setAttribute("style", "color: white;");
  cursor.style.transform = 'rotate(45deg)';
  cursor.style.width = '20px';
  cursor.style.height = '20px';
};

* {

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

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:100%;
  height: 100vh;
  background-color: #0A193E;
  color: white;
  font-family: sans-serif;
  font-size: 20px;
}

.superText {
  padding: 10px 20px;
  cursor: none;
  transition: all 0.2s ease;
}

.cursorFollower {
  width: 20px;
  height: 20px;
  position: absolute;
  border: 1px solid white;
  transition: all 0.2s ease-out;
  pointer-events: none;
  transform: rotate(45deg);
}
<div class="container">
  <p class="superText">Hello World!</p>
</div>

<div class="cursorFollower"></div>
djmepvbi

djmepvbi1#

你的第一个问题是你使用了 SetAttribute 这是错误的,你应该使用 setAttribute . (只需关注camelcase!)
你没有注意到的第二件事是 left , top , width , height 不是元素属性。它们是为家庭准备的 style 属性
因此,请使用以下代码:

button.onmouseover = function (e) {
  cursor.setAttribute("style", `left: ${buttonX}, top: ${buttonY}, width: ${buttonWidth}, height: ${buttonHeight}`);
};

相关问题