Changement de l'image d'arrière-plan par Jquery

Je souhaite changer la position de l'image de fond du bouton avec la fonction de survol. Existe-t-il un moyen simple de conserver xpos ou devrais-je obtenir la position en premier, la diviser et l'utiliser à nouveau avec $ .css().Changement de l'image d'arrière-plan par Jquery

Je devrais changer la position d'arrière-plan de tous les 3 travées si quelqu'un se trouve parmi elles. Donc bt_first: hover ne semble pas utilisable.

Voici mon utilisation. J'ai écrit #should rester même # pour endroit que je ne veux pas changer la valeur de xpos:

$('.bt_first,.bt_sec,.bt_third').hover(function(){ 
     $('.bt_first,.bt_sec,.bt_third').css({'background-position':'#should stay same# -150px'}) 
},function(){ 
     $('.bt_first,.bt_sec,.bt_third').css({'background-position':'#should stay same# -110px'}); 
});

Voici mon html .:

<div><a id="add_comment_btn"><span class="bt_first comments_t"><span>&nbsp;</span></span><span class="bt_sec">&nbsp;</span><span class="bt_third">Comments</span></a></div>

Et css:

.bt_first,.bt_sec,.bt_third,.logout_t,.comments_t span { 
    background: url('img/toolbar_bckrnd.png') no-repeat; 
} 
.bt_first { 
    background-position: left -110px; 
    display: inline-block; 
    height: 24px; 
    width: 15px; 
} 
.bt_sec { 
    background-position: -149px -110px; 
    display: inline-block; 
    height: 24px; 
    width: 2px; 
} 
.bt_third { 
    background-position: right -110px; 
    display: inline-block; 
    height: 24px; 
    padding: 0 10px; 
}

Source

2011-02-04 Kemal

similaires: http://stackoverflow.com/questions/2117594/adding- amount-to-background-position-on-click-jquery – thirtydot

@thirtydot Je ne pense pas que ce soit pareil. Je veux changer les ypos de 3 classes différentes seulement. xpos devrait rester prédéfini. Votre message parle d'autre chose. Ai-je tort? Merci quand même. – Kemal

Kemal: J'ai dit * similaire *, pas * le même *. Cette question a du code pour récupérer la 'background-position', séparer les deux valeurs, changer l'une des valeurs et la remettre à zéro. C'est ce que vous essayez de faire. – thirtydot

Cela devrait fonctionner:

$('#add_comment_btn').hover(function(e) { 
    var s = e.type == 'mouseenter' ? '-134px' : '-110px';   
    $(this).children().css('background-position', function(i,v) { 
     return v.replace(/-?\d+px$/, s); 
    }); 
});

Il en est à l'ancre #add_comment_btn. Si vous avez plusieurs ancres, utilisez simplement un sélecteur de classe pour les sélectionner toutes.

btw le code ci-dessus est fondamentalement le même que le code que vous avez posté dans votre réponse. Je viens de me débarrasser de la redondance.

BTW si vous ne voulez pas ajouter des classes aux points d'ancrage, vous pouvez les sélectionner comme ceci:

$('.bt_first, .bt_sec, .bt_third').parent().hover(.... the above code

Source

2011-02-05 00:14:41

Peut-être comme ceci:

var bg = $('#element').css('backgroundPosition').split(' '); 
bg[1] = '-200px'; 

$('#element').css('backgroundPosition', bg.join(' '));

comme le backgroun D-position est toujours stocké dans l'ordre horizontal vertical cela devrait fonctionner comme la deuxième valeur de tableau est toujours la valeur verticale.

Bien que cela ne puisse fonctionner qu'avec un élément. Avec plusieurs éléments, vous devrez peut-être utiliser une boucle.

Source

2011-02-04 16:39:16 acme

merci. Ca marche mais c'est bien si je ne changerais qu'un seul de fond. J'ai besoin de tout changer. J'ai aussi plus d'un bouton. etc. ça devient complexe. – Kemal

J'ai décidé qu'il n'y avait pas de solution simple et trouver un moyen de sortir à la fin. Si quelqu'un a besoin de ce script ci-dessous fonctionne sans problème.

$('.bt_first,.bt_sec,.bt_third').hover(
function(){ 
    var id = $(this).closest('a').attr('id'); 
    var bg1 = $('#'+id+' > .bt_first').css('background-position').split(' '); 
    var bg2 = $('#'+id+' > .bt_sec').css('background-position').split(' '); 
    var bg3 = $('#'+id+' > .bt_third').css('background-position').split(' '); 
    bg1[1] = '-134px'; 
    bg2[1] = '-134px'; 
    bg3[1] = '-134px'; 
    $('#'+id+' > .bt_first').css('background-position', bg1.join(' ')); 
    $('#'+id+' > .bt_sec').css('background-position', bg2.join(' ')); 
    $('#'+id+' > .bt_third').css('background-position', bg3.join(' ')); 
}, 
function(){ 
    var id = $(this).closest('a').attr('id'); 
    var bg1 = $('#'+id+' > .bt_first').css('background-position').split(' '); 
    var bg2 = $('#'+id+' > .bt_sec').css('background-position').split(' '); 
    var bg3 = $('#'+id+' > .bt_third').css('background-position').split(' '); 
    bg1[1] = '-110px'; 
    bg2[1] = '-110px'; 
    bg3[1] = '-110px'; 
    $('#'+id+' > .bt_first').css('background-position', bg1.join(' ')); 
    $('#'+id+' > .bt_sec').css('background-position', bg2.join(' ')); 
    $('#'+id+' > .bt_third').css('background-position', bg3.join(' ')); 
} 
);

Vous devriez avoir une étiquette « a » avec un « id » comme parent de tous les éléments et ces éléments doivent être les premiers Childs. Sinon, modifiez le script.

<a id="add_comment_btn"><span class="bt_first comments_t"><span>&nbsp;</span></span><span class="bt_sec">&nbsp;</span><span class="bt_third">Comments</span></a>

Source

2011-02-04 23:27:55 Kemal

Changement de l'image d'arrière-plan par Jquery

Répondre

Questions connexes