#javascript #css #timeout #navigation #hover
#javascript #css #тайм-аут #навигация #наведите
Вопрос:
Какой самый простой javascript код, который мне понадобился бы для расширения блока отображения при наведении курсора, чтобы он оставался там в течение секунды, прежде чем вернуться обратно в состояние display none, чтобы пользователь мог щелкнуть расширенную навигацию, где значение display none по умолчанию в css и при наведении курсора отображается блок
Мне нужен только расширенный тайм-аут, просто какой-нибудь простой код
(У меня есть рабочее решение только в css — вместо использования display none я использовал максимальный размер 1 пиксель и нулевую альфа-версию, чтобы он никогда не исчезал, но все равно хотелось бы знать код javascript)
Также есть ли в css какой-либо способ, при наведении курсора на который блок отображения будет полностью отличаться от того, на который вы наводите курсор?
Ответ №1:
Предположительно, вы используете события наведения курсора мыши и mouseout для отображения и скрытия блока отображения, поэтому используйте тайм-аут, чтобы скрыть блок. Если событие наведения курсора мыши происходит до истечения тайм-аута, отмените его. Вот очень простой пример:
<html>
<head>
<title>Lingering block</title>
<style type="text/css">
#foo, #bar {
width: 50px;
height: 50px;
background-color: green;
}
#bar {
background-color: red;
}
</style>
<script type="text/javascript">
var uX = (function() {
var timer;
function showBar() {
if (timer) {
clearTimeout(timer);
timer = null;
}
document.getElementById('bar').style.display = '';
}
function hideBar() {
timer = setTimeout(function () {
document.getElementById('bar').style.display = 'none';
},1000);
}
return {
init: function() {
var bar = document.getElementById('bar');
var foo = document.getElementById('foo');
foo.onmouseover = showBar;
foo.onmouseout = hideBar;
bar.onmouseover = showBar;
bar.onmouseout = hideBar;
bar.style.display = 'none';
foo = null;
bar = null;
}
};
}());
window.onload = uX.init;
</script>
</head>
<body>
<div id="foo"></div>
<div id="bar"></div>
</body>
</html>
Рабочая версия должна использовать делегирование событий, а не жестко запрограммированные вещи, вышесказанное — просто демонстрация стратегии.
Комментарии:
1. выглядит неплохо, как мне использовать и javascript, и css, если бы, допустим, #bar был <ul> <li> /> вложен в #foo и #foo: при наведении курсора li отображался бы блок для отображения списка, а обычный #foo li не отображал бы ничего
2. Если пользовательский интерфейс является потомком foo, то переводите прослушиватели в foo только при наведении курсора мыши / выходе будет всплывать. Рассмотрите возможность добавления / удаления классов вместо прямой настройки отображения.
Ответ №2:
Мне кажется, что вы почти ответили сами. Если у вас уже есть «решение» в CSS, просто используйте Javascript, чтобы вернуть эту настройку.
Что-то вроде:
onMouseOver = setInterval(«this.style.opacity = 0», 1000);
Этот (непроверенный псевдокод) установит непрозрачность в 0 через секунду (1000 мс).
Очевидно, что вы могли бы стать сложнее — вы, вероятно, захотите сбросить CSS обратно к нормальному onMouseOut. Но в принципе, просто измените CSS, который вы нашли, динамически, используя script.
Конечно, я мог что-то упустить.
Комментарии:
1. Вероятно, вы захотите использовать setTimeout вместо setInterval
2. Абсолютно … мозговой пердеж с моей стороны. Затем вы можете установить другой тайм-аут — запуск через несколько мс после этого — для возврата свойства к исходному значению.
Ответ №3:
Я думаю, вам следует взглянуть на JQUERY UI. Я думаю, это послужит вашей цели, и вы также могли бы заглянуть в скрипт Jquery ui, чтобы узнать, что происходит внутри javascript….