selektor hover jQuery - inny sposób - jquery, hover, selektor, lavalamp

Mam zestaw takich menu:

<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>

Dodaję do tego efekt Lavalamp. Po najechaniu kursorem na dowolne menu, tło lavalamp zostanie przeniesione do menu z zakrytym paskiem i wróci do bieżącego menu, jeśli menu nie zostanie zmienione.

Problem polega na tym, że gdy wpadnę do podmenu,uważa się, że nie ma najechania na menu, więc tło lavalampu powraca do aktualnej pozycji menu. Aby temu zapobiec, dodam selektor hover w moim jquery.lavalamp.js w ten sposób:

$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);
};

podczas gdy move (this) jest funkcją, aby przenieśćtło lavalamp do podnoszonego menu. Działa dobrze w każdej przeglądarce z wyjątkiem IE. Tło lavalamp nie zostanie przeniesione i wystąpił błąd javascript zwany "nieobsługiwanym pseudo: hover". Przeszukałem witrynę jquery i nie ma selektora o nazwie: hover.

Czy istnieje inny sposób zastąpienia selektora: hover powyżej? Każda pomoc będzie doceniona.

Odpowiedzi:

Widząc jako :hover jest niezwykle trudne do statycznego wnioskowania za pomocą skryptów (a starsze IE nie obsługują pseudo-klasy na niczym innym niż <a>s), lepiej jest użyć jQuery hover() metoda wymuszania real klasy i użyj zamiast tego:

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

Potem zastępujesz drugą linię,

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

...z tym:

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

... który zamiast tego sprawdza, czy obiekt jQuery szuka przodków z hover klasa zwraca wszystkie elementy.

użyj tego kodu, pomóż mi:

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++;
});
}