jquery hover selector - другой способ

Question

У меня есть набор меню, как это:

<ul class="lavalamp">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>
        Menu 3
        <ul>
            <li>Sub Menu 1</li>
            <li>Sub Menu 2</li>
            <li>Sub Menu 3</li>
        </ul>
    </li>
    <li>Menu 4</li>
</ul>

Я добавляю эффект лавалампа на это. При наведении курсора на любое меню фон lavalamp перемещается в скрытое меню и возвращается к текущему меню, если меню не отображается.

Проблема в том, что когда я нахожусь в подменю, считается, что меню не находится, поэтому фон lavalamp возвращается к текущему пункту меню. Чтобы предотвратить это, я добавляю hover selector в мой файл jquery.lavalamp.js следующим образом:

$li.not(".back").hover(function() {
    if (!$('.sub-menu').is(":hover")) {
    move(this);
    }
}, function(){});

function move(el) {
    $back.each(function() {
        $(this).dequeue(); }
    ).animate({
        width: el.offsetWidth,
        left: el.offsetLeft
    }, o.speed, o.fx);
};

в то время как перемещение (это) - функция, чтобы переместить фон lavalamp в скрытое меню. Он хорошо работает в любом браузере, кроме IE. Фон lavalamp не перемещается, и возникает ошибка javascript, которая называется "неподдерживаемое псевдо:hover". Я искал на сайте jquery, и у него нет селектора с именем:hover.

Есть ли другой способ заменить селектор: hover выше? Любая помощь будет оценена.

Answer 1

Видеть как :hover общеизвестно, что статически трудно выводить с помощью сценариев (и старые IE не поддерживают псевдо-класс ни для чего, кроме <a>s) лучше использовать jQuery hover() метод, чтобы вызвать реальный класс и использовать его вместо этого:

$li.hover(function(){
  $(this).toggleClass('hover');
});

Затем вы заменяете вторую строку,

if (!$('.sub-menu').is(":hover")) {

...с этим:

if(!$(this).closest('.hover').length){

... который вместо этого проверяет, ищет ли объект jQuery предков с hover класс возвращает любые элементы.

Answer 2

Используйте этот код, он мне поможет вам:

var previousClass = '';
var arr= $("li");
$.map(arr, function(li){
 li.mouseout(function (li) {
                    eventMouseOut(li);
                });
 li.mouseover(function (li) {
                    eventMouseOver(li);
               });
});
 function eventMouseOver(_this) {
            previousClass = $(_this).attr("class");
            $(_this).removeClass().addClass("Hover");
        }
 function eventMouseOut(_this) {

            var count = 1;
           var arr= $("li");
            $.map(arr, function (li) {
                $(li).removeClass().addClass("Normal");
                count++;
            });
        }