Перелистывание мышью
Почему мышь мерцает с этими заданными событиями?
Я пробовал следующий код
const headerTags1 = document.querySelector('h1');
headerTags1.addEventListener('mouseenter', function(event){
event.target.style.display = "none";
})
console.info(headerTags1)
const headerTags2 = document.querySelector('h1');
headerTags2.addEventListener('mouseleave', function(event){
event.target.style.display = "initial";
})
console.info(headerTags2)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это происходит потому, что, как только вы наводите курсор на h1, он скрывается, и поскольку он теперь скрыт, вы больше не наводите на него указатель мыши и mouseleave срабатывает, поэтому он отображается, но затем вы наводите на него курсор, поэтому он скрывается, и скоро.
const headerTags1 = document.querySelector('h1');
headerTags1.addEventListener('mouseenter', function(event){
event.target.style.display = "none";
})
console.info(headerTags1)
const headerTags2 = document.querySelector('h1');
headerTags2.addEventListener('mouseleave', function(event){
event.target.style.display = "initial";
})
console.info(headerTags2)<h1>Now you see me...</h1>Это, конечно, не самое удачное дизайнерское решение. Чего вы действительно пытаетесь достичь?
Обновлено:
Just want to have the button disappear and reappear when it's hovered over or better yet just change colors when it's hovered over...
Тогда лучшим подходом было бы просто использовать CSS :hover псевдокласс для изменения стиля элемента только во время его наведения.
<!doctype html>
<html>
<head>
<title>Page Title Here</title>
<style>
h1:hover { opacity:0; }
button:hover { color:red; background-color:#ff0; }
</style>
</head>
<body>
<h1>Now you see me...</h1>
<button>Hover Over Me</button>
</body>
</html>Просто хочу, чтобы кнопка исчезала и снова появлялась при наведении курсора или, что еще лучше, просто меняла цвета при наведении курсора...
Хорошо, Скотт, я переместил опцию наведения в свою навигацию, я знаю, что это неправильно, но я не знаю, как правильно это настроить...
const homeNavLink = document.querySelector('.nav a'); homeNavLink.addEventListener («наведение», функция (событие) { h1: наведение = цвет красный; кнопка: наведение = цвет фона: # ff0; }) @ScottMarcus
@Jonaahfire Нет, ты неправильно понял. JavaScript вообще не нужен в моем примере. Просто CSS. Вы помещаете CSS внутри элемента <style>, и этот элемент помещается в элемент <head> документа. Нет JavaScript. Я обновлю ответ, чтобы показать, как будет выглядеть полная структура документа.
Скотт Маркус дал отличное объяснение мерцанию.
В качестве альтернативы вы можете использовать свойство непрозрачности стиля. Но элемент по-прежнему будет кликабельным.
const headerTags = document.querySelector('h1');
headerTags.addEventListener('mouseenter', function(event){
event.target.style.opacity = 0;
})
headerTags.addEventListener('mouseleave', function(event){
event.target.style.opacity = 1;
})<h1>Now you see me...</h1>@Jonaahfire Смотрите мой ответ о том, как сделать это вообще без JavaScript.
Без минимальный воспроизводимый пример, чтобы увидеть проблему, мы не можем помочь.