Задержка состояния css: hover при наведении курсора мыши
У меня есть раскрывающееся меню уровня 2, в котором мышь должна перемещаться по довольно узкому коридору, чтобы меню оставалось открытым, и если оно сбивается с пути, меню неожиданно закрывается, это расстраивает. Я хочу, чтобы меню закрывалось не сразу, а с задержкой.
это стандартное меню, созданное с помощью css, например tis:
ul.menu li ul {
display: none;
}
ul.menu li:hover ul {
display:block;
}
Мне нужно, чтобы при наведении курсора меню оставалось видимым не менее 0,5 секунды.
попробовали это, но это не работает:
<script>
$( ".menu li" ).mouseout(function() {
$(".menu li ul").css("display: block");
$(".menu li ul").css.setTimeout("display: none", 2000);
});
</script>
@Pete, это определенно чище, чем мой, я удаляю свой ответ и запомню ваш;)
Не уверен, почему это было повторно открыто. Это явно дубликат, и ответы точно такие же, как в предложенных вопросах и ответах.
@Paulie_D извините, я повторно открыл его, так как ни один из ответов в дупе не показал, как задержать исчезновение на полсекунды - они просто показали, как сделать блок отображения на отсутствие перехода
Добавление задержки - незначительное дополнение к обману, не заслуживающему повторного открытия такого чрезмерного обмана.
Да, но так как это была основная часть вопроса, а OP, похоже, вообще не знает, как делать анимацию, я подумал, что небольшая помощь не помешает. Кроме того, мой ответ не в дураках, и я думаю, что использование событий указателя чище, чем видимость.
Ответы 3
Попробуйте это: используйте свойство перехода CSS3 с видимостью, и вы можете сделать его плавным. увеличьте время перехода в секундах в соответствии с вашими требованиями.
ul.menu li ul {
visibility: hidden;
opacity: 0;
}
ul.menu li:hover ul {
visibility: visible;
transition: visibility 0s, opacity 1.5s linear;
opacity: 1;
}<ul class = "menu">
<li>Menu
<ul>
<li>Menu inside menu</li>
</ul>
</li>
</ul>ПРИМЕЧАНИЕ: я дал класс "меню" ul и, следовательно, изменил классы css. Пожалуйста, внесите соответствующие изменения в свой код
OP нужно обратное: задержка при завершении состояния зависания, а не при его запуске ... Обратите внимание на вопрос.
@sjahan, я по-другому понял. В этом случае OP может отменить CSS. Я обновил это в своем посте. пожалуйста, посмотри
Спасибо, это работает, я просто добавил переход в ul.menu li ul, а не на: hover, чтобы отменить.
Вы можете использовать такие переходы:
ul.menu {
position: relative;
background: lime;
width: 150px;
}
ul.menu li ul {
position: absolute;
background: red;
visibility: hidden;
opacity: 0;
right: 0;
margin-top: -14px;
transition: visibility 1.5s linear 1s, opacity 1.5s linear 1s;
}
ul.menu li:hover ul {
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0s;
}<ul class = "menu">
<li>
link a
</li>
<li>
link b
<ul>
<li>link b - 1</li>
<li>link b - 2</li>
</ul>
</li>
<li>
link c
</li>
</ul>Вы можете использовать переход с задержкой для бита, чтобы он оставался видимым при наведении курсора:
.nested {
pointer-events:none; /* this is so it behaves like display none and mouse does not interact with child when hidden */
opacity: 0;
transition: opacity 0.1s; /* change length to longer for a nicer fade */
transition-delay: 1s; /* fadeout won't happen for a second */
}
.hover:hover .nested {
pointer-events: auto;
opacity: 1;
transition: opacity 0.1s; /* fade in when hovered */
transition-delay: 0s; /* fade in immediately */
}<div class = "hover">
hover
<div class = "nested">
nested
</div>
</div>В приведенном выше примере ваш ul будет .nested, а ваш родительский li будет .hover.
Есть ли способ добавить свойство display: block с помощью jquery на 0,5 секунды после мыши?