Indice actuel de l'occurence LI

Le scénario est décrit ci-dessous.Indice actuel de l'occurence LI

<li onmouseover="swapArrow_white()" onmouseout="swapArrow_black()"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a> 
<li onmouseover="swapArrow_white()" onmouseout="swapArrow_black()"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a> 
<li onmouseover="swapArrow_white()" onmouseout="swapArrow_black()"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a>

J'ai besoin de changer l'image de flèche vers le bas sur l'événement mouseover du li. J'utilise le script suivant. Mais, lorsque survient un événement de survol, toute l'image déroulante est modifiée. Il ne choisit pas le LI actuel sur lequel l'événement mouseover s'est produit.

est-il une méthode pour obtenir le LI courant de sorte que seule une image peut changer à un moment

S'il vous plaît aidez-moi à ce problème?

Source

2010-07-23 Lokesh Yadav

Essayez événements de liaison jQuery donc:

HTML:

<li class="changeColor"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a> 
<li class="changeColor"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a> 
<li class="changeColor"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a>

jQuery:

$('li.changeColor').mouseover(function(){$("img", this).attr("src","common/images/downArrowWhite.png");}) 
$('li.changeColor').mouseout(function(){$("img", this).attr("src","common/images/downArrow.png");})

Source

2010-07-23 18:13:37 Adam

merci pour les réponses rapides. Mais src n'est pas l'attribut de LI. nous devons obtenir l'élément img. –

Il suffit donc de changer $ (this) en $ ("> img", this) ou $ ("img", this) – fantactuka

@fantactuka Bonne idée. J'ai fait ce changement. – Adam

Je suis d'accord avec la solution d'Adam, mais il serait préférable d'utiliser css pour cette :

.changeColor a { 
    background: url('common/images/downArrow.png') 
} 

.changeColor a:hover { 
    background: url('common/images/downArrowWhite.png') 
}

Je suis assez sûr que son possible de style élément a pour couvrir toute la zone de la li (par exemple. avec display: block)

solution Js:

$('li.changeColor').hover(function() { 
    $("img", this).attr("src","common/images/downArrowWhite.png");} 
}, function() { 
    $("img", this).attr("src","common/images/downArrow.png");} 
})

Source

2010-07-23 18:29:12 fantactuka

il y a déjà une image de gradient d'arrière-plan attachée au LI> donc impossible de mettre l'image de la flèche comme image de fond. Suggerez une autre idée. –

Ajouter un élément supplémentaire comme 'span' et utiliser .changeColor une durée { background: url ('common/images/downArrow.png') } .changeColor a: hover {durée de de fond: url (» commun/images/downArrowWhite.png ') } Cela est beaucoup mieux que le changement de l'élément src d'image – fantactuka

chance dur :) n'a toujours pas obtenu le résultat recherché milieu nuit @ 2:00 S'il vous plaît mettre le code ici .. tout le monde s'il vous plaît aidez-moi .. j'ai ma sortie de projet demain .. –

Essayez la liaison à l'aide de chaque fonction pour assigner chaque image sa propre action vol stationnaire.

$('li a').each(function(){ 
    img = $(this).child('img'); 
    $(this).hover(function(){ 
     img.addClass('arrowDown'); 
    },function(){ 
     img.removeClass('arrowDown'); 
    }); 
});

À moins que ces flèches déclenchent des événements JS, CSS est toujours le chemin à parcourir.

Source

2011-01-18 12:43:35

Répondre

Questions connexes