jquery hover selector - un altro modo - jquery, hover, selector, lavalamp

Ho un set di menu come questo:

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

Aggiungo un effetto lavalamp su questo. Quando passo il mouse su qualsiasi menu, lo sfondo del campo di lavalamp si sposta sul menu in volo e tornerà al menu corrente se il menu non è aleggiato.

Il problema è che quando passo il mouse sui sottomenu,è considerato non aleggiare il menu in modo che lo sfondo di lavalamp ritorni alla voce di menu corrente. Per evitare ciò, aggiungo un selettore al passaggio del mouse nel mio jquery.lavalamp.js in questo modo:

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

mentre move (this) è la funzione per spostare ilsfondo lavalamp al menu a bilico. Funziona bene su tutti i browser ad eccezione di IE. Lo sfondo di lavalamp non si è mosso e c'è un errore javascript chiamato "pseudo non supportato: hover". Ho cercato nel sito jquery e non ha un selettore chiamato hover.

C'è un altro modo per sostituire il selettore hover sopra? Qualsiasi aiuto sarebbe apprezzato.

risposte:

Vedendo come :hover è notoriamente difficile da dedurre staticamente tramite lo scripting (e gli IE più vecchi non supportano la pseudo classe su qualcosa di diverso da <a>s), è meglio usare jQuery hover() metodo per forzare a vero classe e usa quello invece:

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

Quindi sostituisci la tua seconda linea,

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

...con questo:

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

... che invece verifica per vedere se un oggetto jQuery cerca antenati con il hover la classe restituisce tutti gli elementi.

usa questo codice, io ti aiuto:

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