Aggiunta di attributi CSS hover tramite jQuery/Javascript

Question

Alcuni stili CSS devono essere applicati a un elemento al passaggio del mouse e gli stili CSS devono essere applicati utilizzando javascript/jquery direttamente e non attraverso i fogli di stile o $(this).addClass('someStyle') perché sto inserendo gli elementi DOM in un'altra pagina.

Possiamo applicare le solite stili CSS utilizzando

$('#some-content').css({ 
    marginTop: '60px', 
    display: 'inline-block' 
}); 

Come dovremmo aggiungere gli stili CSS per :hover eventi?

---

Dobbiamo ricorrere a:

$('#some-content').hover(
     function(){ $(this).css('display', 'block') }, 
     function(){ $(this).css('display', 'none') } 
) 

Answer 1

Trovo usando MouseEnter e mouseLeave di essere migliore di hover. C'è più controllo.

$("#somecontent").mouseenter(function() { 
    $(this).css("background", "#F00").css("border-radius", "3px"); 
}).mouseleave(function() { 
    $(this).css("background", "00F").css("border-radius", "0px"); 
}); 

Answer 2

Prova questo:

$('#some-content').hover(function(){ 
    $(this).css({ marginTop: '60px', display: 'inline-block' }); 
}, function(){ 
    $(this).css({ //other stuff }); 
}); 

o utilizzando classi

$('#some-content').hover(function(){ 
    $(this).toggleClass('newClass'); 
}); 

Maggiori informazioni qui .hover() e .toggleClass()

Answer 3

Si dovrebbe mettere in un evento hover:

012.

var elem = $('#elem'); 

elem.hover(function() { 
    // ... :hover, set styles 
}, function() { 
    // ... this function is called when the mouse leaves the item, set back the 
    //  normal styles 
}); 

Tuttavia, consiglio vivamente di mettere il tuo CSS in classi e usare quelle classi in JS, dovresti dividere le lingue il più possibile.

Answer 4

$("#someObj").hover(function(){ 
    $(this).css(...); 
}:); 

http://api.jquery.com/hover/