Modifica solo y pos dell'immagine di sfondo tramite Jquery

Desidero modificare l'immagine di sfondo del pulsante e la posizione con la funzione di passaggio del mouse. C'è un modo semplice per mantenere xpos o dovrei prima ottenere la posizione, dividerlo e usarlo di nuovo con $ .css() di nuovo.Modifica solo y pos dell'immagine di sfondo tramite Jquery

Dovrei cambiare la posizione di sfondo di 3 span se qualcuno passa con il mouse su uno di essi. Quindi bt_first: hover non sembra utilizzabile.

Ecco il mio utilizzo. Ho scritto #should rimanere nello stesso # per posto che io non voglio cambiare il valore di 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'}); 
});

Ecco il mio 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>

e 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; 
}

fonte

2011-02-04 Kemal

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

@thirtydot Non penso sia lo stesso. Voglio cambiare solo 3 ypos della classe diversa. xpos dovrebbe rimanere predefinito. Il tuo post parla di qualcos'altro. Ho sbagliato? Grazie comunque. – Kemal

Kemal: ho detto * simile *, non * lo stesso *. Quella domanda ha il codice per recuperare il 'background-position', dividere i due valori, modificare uno dei valori e reimpostarlo. Qual è quello che stai cercando di fare. – thirtydot

Questo dovrebbe funzionare:

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

Questo vale per l'ancora #add_comment_btn. Se hai più ancore, usa semplicemente un selettore di classe per selezionarle tutte.

btw il codice sopra riportato è fondamentalmente uguale al codice che hai postato nella risposta. Mi sono appena liberato della ridondanza.

btw se non si desidera aggiungere classi per le ancore, è possibile selezionarle in questo modo:

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

fonte

2011-02-05 00:14:41

Forse così:

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

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

Come sfondo d-position è sempre memorizzato nell'ordine horizontal vertical questo dovrebbe funzionare in quanto il secondo valore dell'array è sempre il valore verticale.

Anche se questo può funzionare solo con un elemento. Con più elementi potresti dover usare un ciclo.

fonte

2011-02-04 16:39:16 acme

grazie. Funziona ma va bene se cambierei solo uno di sfondo. Devo cambiare tutto. Ho anche più di un pulsante. ecc.ecc. diventa complesso. – Kemal

Ho deciso che non esiste una soluzione semplice e trovare una via d'uscita alla fine. Se qualcuno ha bisogno di questo script qui sotto funziona senza problemi.

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

Si dovrebbe avere un tag "a" con un "id" come padre di tutti gli elementi e anche questi elementi devono essere i primi childs. Altrimenti modifica lo 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>

fonte

2011-02-04 23:27:55 Kemal

Modifica solo y pos dell'immagine di sfondo tramite Jquery

risposta

Problemi correlati