Я пытаюсь изменить указатель мыши на скорость или скорость наведения для этого мега-меню, где, когда пользователь наводит курсор на кнопки, перед запуском меню выпадаете задержка.3 секунды. Вот фактический сайт http://adobe-accessibility.github.io/Accessible-Mega-Menu/
и jquery здесь: http://adobe-accessibility.github.io/Accessible-Mega-Menu/js/jquery-accessibleMegaMenu.js
Цените любые советы.
Спасибо заранее, Рик
Я на самом деле пытаюсь сделать это через JQuery. Следующий код работает с задержкой на 3 секунды на мыши, однако я не уверен, как я могу заставить его работать для MouseOver:
_mouseOverHandler = function (event) {
clearTimeout(this.mouseTimeoutID);
$(event.target)
.addClass(this.settings.hoverClass);
_togglePanel.call(this, event);
if ($(event.target).is(':tabbable')) {
$('html').on('keydown.accessible-megamenu', $.proxy(_keyDownHandler, event.target));
}
};
/**
* @name jQuery.fn.accessibleMegaMenu~_mouseOutHandler
* @desc Handle mouseout event on mega menu.
* @param {event} Event object
* @memberof jQuery.fn.accessibleMegaMenu
* @inner
* @private
Exit Time is now .300 seconds
*/
_mouseOutHandler = function (event) {
var that = this;
$(event.target)
.removeClass(that.settings.hoverClass);
that.mouseTimeoutID = setTimeout(function () {
_togglePanel.call(that, event, true);
}, 300);
if ($(event.target).is(':tabbable')) {
$('html').off('keydown.accessible-megamenu');
}
};
Да, проверьте строки файла 139 и 151 megamenu.css, просто измените значения легкости перехода.
-webkit-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
-moz-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
-ms-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
-o-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
border: 1px solid rgba(0,0,0,0.3);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.accessible-megamenu .accessible-megamenu-panel.open {
visibility: visible;
top: 3em;
max-height: 1200px;
opacity: 1;
z-index: 1001;
-webkit-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
-moz-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
-ms-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
-o-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
}
Надеюсь, это поможет вам.
С уважением.