jquery hover selector - une autre façon - jquery, hover, selector, lavalamp

J'ai un ensemble de menu comme ceci:

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

J'ajoute un effet lavalamp à ce sujet. Lorsque je survole un menu, l'arrière-plan de lavalamp passe dans le menu survolé et revient au menu actuel si le menu n'est pas survolé.

Le problème est que, lorsque je survole les sous-menus,il est considéré comme ne survolant pas le menu de sorte que l’arrière-plan de lavalamp retourne à l’élément de menu actuel. Pour éviter cela, j'ajoute un sélecteur de survol dans mon fichier jquery.lavalamp.js comme ceci:

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

while move (this) est la fonction pour déplacer lefond de lavalamp au menu survolé. Cela fonctionne bien dans tous les navigateurs sauf dans IE. Le fond de lavalamp ne "bougera pas et il y aura une erreur javascript appelée" pseudo: hover non supporté ". J'ai effectué une recherche sur le site jQuery et il n’existe pas de sélecteur appelé: hover.

Existe-t-il un autre moyen de remplacer le sélecteur: hover ci-dessus? Toute aide serait appréciée.

Réponses:

Voyant comme :hover est notoirement difficile à déduire statiquement via un script (et les anciens IE ne supportent pas la pseudo-classe sur autre chose que <a>s), il est préférable d’utiliser jQuery hover() méthode pour forcer un réal classe et utilise ça à la place:

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

Ensuite, vous remplacez votre deuxième ligne,

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

...avec ça:

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

... qui teste à la place si un objet jQuery recherche des ancêtres avec le hover La classe retourne tous les éléments.

utilisez ce code, il peut vous aider:

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