Question

所以我有一个页面，其中用div替换了光标。光标只是我可以使用CSS进行动画处理的页面的一部分。我要实现的主要目的是，当我将鼠标悬停在任何按钮上时，使此光标的大小发生变化。我无法正常工作...

光标定位是通过JQuery脚本处理的，但是最原始的脚本似乎并不想与我一起使用... 我无法解决错误...

// Jquery code that moves the cursor (div element)
$(document).on('mousemove', function(e){
	$('#cursor').css({
		left:	e.pageX - 7,
		top:	e.pageY - 7
	});
});

// Function to be executed when mouse is over a button
document.querySelectorAll('button').addEventListener("mouseover", cursorHovering);

function cursorHovering() {
	document.getElementById('object').style = "transform: scale(2);";
}

body {
  height: 300px;
  width: 300px;
  background-color: #ccc;
}

*, body { cursor: none !important; }
#cursor {
    position: fixed;
    z-index: 20000;
    height: 15px;
    width: 15px;
    background-color: #ffffff;
    mix-blend-mode: difference;
    border-radius: 50%;
    opacity: 0;
    transition: 0.3s;
    transition-property: transform, opacity;
    pointer-events: none;
}
body:hover #cursor {
    opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id="cursor"></div>
  <button class="button1">Hover over me (1)</button>
  <button class="button2">Hover over me (2)</button>
  <button class="button3">Hover over me (3)</button>
</body>

Answer 1

您的意思是这样的吗？

// Jquery code that moves the cursor (div element)
var c = document.getElementById('cursor');
document.addEventListener('mousemove', (e) => { 
  c.style.left = e.pageX - 7 + 'px';
  c.style.top = e.pageY - 7 + 'px';
});

// Function to be executed when mouse is over a button
document
  .querySelectorAll('button')
  .forEach(b => {
     b.addEventListener("mouseover", () => c.style.transform='scale(2)');
     b.addEventListener("mouseout", () => c.style.transform='scale(1)');
  });

body {
  height: 300px;
  width: 300px;
  background-color: #ccc;
}

*, body { cursor: none !important; }
#cursor {
    position: fixed;
    z-index: 20000;
    height: 15px;
    width: 15px;
    background-color: #ffffff;
    mix-blend-mode: difference;
    border-radius: 50%;
    opacity: 0;
    transition: 0.3s;
    transition-property: transform, opacity;
    pointer-events: none;
}
body:hover #cursor {
    opacity: 1;
}

  
<body>
  <div id="cursor"></div>
  <button class="button1">Hover over me (1)</button>
  <button class="button2">Hover over me (2)</button>
  <button class="button3">Hover over me (3)</button>
</body>

Answer 2

这是一个普通的JS解决方案。

document.addEventListener('mousemove', handleMouseMove, false);

// Cache the elements
const cursor = document.getElementById('cursor');
const buttons = document.querySelectorAll('button');

// For each button add the two event listeners
[...buttons].forEach(button => {
  button.addEventListener('mouseover', handleMouseOver, false);
  button.addEventListener('mouseout', handleMouseOut, false)
});

function handleMouseMove(e) {

  // You need to ensure that you add "px" to the
  // end of the value. jQuery does this automatically.
  cursor.style.left = `${e.pageX - 7}px`;
  cursor.style.top = `${e.pageY - 7}px`;
}

function handleMouseOver() {
  cursor.style.transform = 'scale(2)';
}

function handleMouseOut() {
  cursor.style.transform = 'scale(1)';
}

body {
  height: 300px;
  width: 300px;
  background-color: #ccc;
}

*,
body {
  cursor: none !important;
}

#cursor {
  position: fixed;
  z-index: 20000;
  height: 15px;
  width: 15px;
  background-color: #ffffff;
  mix-blend-mode: difference;
  border-radius: 50%;
  opacity: 0;
  transition: 0.3s;
  transition-property: transform, opacity;
  pointer-events: none;
}

body:hover #cursor {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="cursor"></div>
  <button class="button1">Hover over me (1)</button>
  <button class="button2">Hover over me (2)</button>
  <button class="button3">Hover over me (3)</button>
</body>

鼠标悬停在任何按钮上时执行功能

2 个答案: