Блог

Главная - Вопросы по программированию - как сделать повторитель курсора в том же положении/размере, что и другой div, при наведении курсора на этот элемент

как сделать повторитель курсора в том же положении/размере, что и другой div, при наведении курсора на этот элемент

#javascript #html #jquery #css

Вопрос:

У меня есть элемент курсора, который следует за позициями мыши 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>

Комментарии:

1. Ну, это наверняка не сработает , если вы произвольно переключитесь с правильного написания имени метода, setAttribute , на несуществующее SetAttribute .

2. хорошая мысль @CBroe, но я обновил ее в своем коде и все еще не работаю. Может быть, я делаю что-то еще не так?

3. Должно ли это быть cursor.setAttribute("left",buttonX); для того, чтобы cursor.setAttribute("style", "left: " buttonX); ?

4. спасибо @Shuvo, но не повезло

5. Я отредактировал фрагмент @MrOutadi, но не могу изменить расположение курсора (я хочу, чтобы он сохранял те же X и Y текста при наведении курсора поверх текста. этот способ статичен при наведении указателя мыши на этот текст/кнопку?

Ответ №1:

  1. Ваша первая проблема заключалась в том, что вы использовали SetAttribute то, что является ложным, и вы должны использовать setAttribute . (просто займитесь кейсом для верблюдов!)
  2. И второе, чего вы не заметили, это то , что left , top , width , height не являются атрибутами элемента. они предназначены для style атрибута!

поэтому, пожалуйста, используйте этот код:

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

Комментарии:

1. спасибо @MrOutadi, но по какой-то причине после обновления этой строки она все еще не работает

2. Привет @MrOutadi! наконец-то это сработало (частично) Я, наконец, сделал div того же размера, что и кнопка, но я не могу заставить его оставаться в том же положении (x и y), что и кнопка, при наведении курсора на верхнюю часть кнопки. нравится становиться границей кнопки, когда вы зависаете над ней. и только после того, как курсор будет удален от кнопки, чтобы сохранить его фактические x и y?

3. @Eugenio, подождите, я только что исправил ошибку при наведении, я прочитал этот комментарий сейчас, поэтому я собираюсь исправить щелчок 🙂

4. спасибо @MrOutadi :)! Я немного обновил фрагмент. Я знаю, что проблема связана с позиционированием курсора на основе клиента X и Y, поэтому я пытаюсь реализовать оператор if, проверяющий смещение Y и X по сравнению с кнопкой X и Y, чтобы разрешить это движение или поместить его поверх кнопки x и y в случае, если он касается кнопки. Немного сложный, не эксперт в этом, ха-ха

5. @Eugenio не могли бы вы, пожалуйста, взглянуть на это: codesandbox.io/s/onmouseover-or-onmouseenter-n4neo

Метки: , ,