Как использовать `.hover ()`, когда элемент скрыт?
Я делаю HTML-страницу, и теперь я создал контент с помощью HTML и CSS, я хотел бы добавить поведение с помощью Javascript и jQuery. У меня есть группа в верхней части моей страницы, сделанная в CSS (с идентификатором #band). Я хочу, чтобы это:
- Поместите на него кнопки, которые позволяют пользователю изменять цвет фона (готово)
- Показать загрузку (готово)
- После загрузки
fadeOut(500)(готово) - onhover, показать
- когда нет, парящая шкура
Однако сценарий в .hover(function(){}) не запущен. Почему это? Чтобы вы могли воспроизвести мою проблему, вот код ниже:
Я сделал несколько тестов и:
- Синтаксис правильный
- JQuery работает (в частности
fadeIn())
Я считаю, что проблема в том, что <div id = "band"> выгружается, когда гаснет, а это означает, что обнаруживать нечего. Как мне это преодолеть?
function A() {
document.body.style.backgroundColor = "#FF1493";
}
function B() {
document.body.style.backgroundColor = "#22F822";
}
function C() {
document.body.style.backgroundColor = "#888888";
}
function D() {
document.body.style.backgroundColor = "#2262FF";
}
$(document).ready(function() {
$("#band").fadeOut(750);
$("#band").hover($("#band").fadeIn(750),$("#band").fadeOut(750));
});/*Basic Format*/
#band {
border: 1px solid black;
background: #959595;
width: 100%;
top: 0;
}
#colors {
left: 0;
width: 15%;
background-color: grey;
}
.buttoncolor {
cursor: pointer;
border: 1px solid white;
margin: 10px;
width: 20px;
height: 20px;
}
#buttonA {
background-color: #FF1493;
}
#buttonB {
background-color: #22F822;
}
#buttonC {
background-color: #888888;
}
#buttonD {
background-color: #2262FF;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload = "A()">
<div class = "fade" id = "band">
<div id = "colors">
<button type = "button" class = "buttoncolor" id = "buttonA" onclick = "A()"></button>
<button type = "button" class = "buttoncolor" id = "buttonB" onclick = "B()"></button>
<button type = "button" class = "buttoncolor" id = "buttonC" onclick = "C()"></button>
<button type = "button" class = "buttoncolor" id = "buttonD" onclick = "D()"></button>
</div>
</div>
<div><h1>TITLE</h1></div>
</body>@RoryMcCrossan хорошо, но разве .hover()syntax не $(element).hover(function(if true),function(if false))?
Да, но вы немедленно запускаете fadeIn() и назначаете его результат обработчику событий, и у вас нет функции, определенной как fadeOut(). Вам нужно обернуть их анонимными функциями. Однако, чтобы сэкономить вам время, скрытые элементы не запускают события mouseenter (это то, что слушает hover()), поэтому этот шаблон ошибочен с самого начала. Я бы посоветовал вам оставить полосу уменьшенной по высоте или ширине, чтобы там было хоть что-то, над чем можно было бы зависать, вместо того, чтобы полностью ее скрывать, или вместо этого переключать ее нажатием кнопки.
@RoryMcCrossan fadeIn() и fadeOut() - это операторы jQuery.
Я знаю, но вам нужно 1) вызвать fadeOut() для элемента. В данный момент вы просто вызываете функцию под названием fadeOut(), которой, похоже, не существует. 2) Оберните эти вызовы функций в анонимные функции, так как вам нужно предоставить обработчику событий ссылка на функцию, а не результат назначения обработчика функции
Если вас это смущает, я бы посоветовал посмотреть документацию jQuery, поскольку в них есть множество примеров, на которые вы можете ссылаться: api.jquery.com/hover. Однако, как я уже сказал, это не сработает так, как вы пытаетесь достичь.
@RoryMcCrossan ок. Так я должен использовать .css("height", 1)?
Позвольте нам продолжить обсуждение в чате.
Можно, но это очень маленький запас. Вы ожидаете, что ваши пользователи найдут элемент размером 1px и наведут на него курсор. Я бы предложил не менее 25 пикселей с каким-то значком, чтобы было понятно, какой будет функция при наведении курсора.
Или, может быть, установить z-index на 2?
Вы могли бы, но это не улучшает крошечную область попадания
Поэтому я не буду менять высоту, а изменю z-index
Одно это не сработает. Как я уже говорил, скрытые элементы не вызывают события mouseenter.
Итак, кнопка, вызывающая #band, позволяющая изменить цвет фона?
Да, это могло сработать.
Хорошо, спасибо, я ценю ваше время.
@VortexYT - лучшее решение - иметь родительский элемент, охватывающий элемент #band, который имеет такую же высоту и ширину, как #band, но с прозрачным фоном. Таким образом, вы можете записать событие hover в этот родительский элемент, и когда это произойдет, вы можете просто показать #band.
@RajshekarReddy хорошо, спасибо. Я могу попробовать это в следующий раз.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
В вашем фрагменте есть синтаксическая ошибка:
$("$this"), а также неверна сама логикаhover().