Обнаружение наведения курсора мыши при загрузке страницы с помощью jQuery

Мое решение: добавить новое значение CSS с помощью псевдоселектора наведения, а затем проверить это. Однако кажется, что это работает только иногда.

CSS:

#el:hover {background-color: transparent; }

jQuery:

if ($('#el').css('background-color') == 'transparent')

Вот как я это решил:

/** detect if the mouse was hovering over and element when the page loaded */
function detectHoverOnLoad(options) {
    var sel = options.selector

    if ($(sel + ':hover').length) {
        console.log('loaded while HOVERING over ' + sel)
    } else {
        console.log('loaded, but NOT hovering over ' + sel)
    }
}

потом я назвал это так:

detectHoverOnLoad({selector: '#headerNav'})

При дополнительном тестировании я заметил, что иногда, если мышь двигалась, она не всегда обнаруживала наведение, поэтому я добавил в else запасной вариант для обнаружения движения мыши над элементом:

function detectHoverOnLoad(options) {
    var sel = options.selector

    if ($(sel + ':hover').length) {
        console.log('loaded while HOVERING over ' + sel)
    } else {
        console.log('NOT hovering')
        $(sel).one('mousemove', function (e) {
            if ($(e.target).parents(sel).length) {
                console.log('MOUSEMOVEed over ' + sel)
            }
        });
    }
}

РЕДАКТИРОВАТЬ: после тестирования я пришел к выводу, что это не сработает. Сэкономьте время и попробуйте что-нибудь еще.

Я думаю, вы действительно можете заставить работать ограничивающую рамку элемента.

Это немного уловка, но стратегия заключается в использовании element.offset () для получения координат элемента относительно документа вместе с element.width () и element.height () для создания ограничивающей рамки для положение мыши. Затем вы можете сравнить значения .pageX и .pageY события с этим ограничивающим прямоугольником.

Как вы правильно сказали, вам нужно событие для получения этих координат, что для вас не работает, так как они нужны вам немедленно. Тем не менее, задумывались ли вы о подделке события щелчка мыши путем вызова $ ('# some-element'). Trigger ('click') после загрузки документа? Вы можете зарегистрировать функцию для проверки ограничивающего прямоугольника с помощью $ ('# some-element) .click () заранее и посмотреть, что она делает.

Почему нет! :)

Вот мое решение:

ДЕМО

Код из демонстрации:

function handler(ev) {
    var target = $(ev.target);
    var elId = target.attr('id');
    if( target.is(".el") ) {
       alert('The mouse was over'+ elId );
    }
}
$(".el").mouseleave(handler);

Я нашел самый простой способ, который возможен в мире! Забудьте о JQ hover, используйте его .mouseover и .mouseleave и определите функции для них обоих, это не создает никаких проблем при загрузке и после загрузки!

   $('li').mouseover(function () {
       codes
   } 


   $('li').mouseleave(function () {
       codes
   }