Hinzufügen von Hover-CSS-Attributen über jQuery/Javascript

Question

Einige CSS-Stile müssen auf ein Element in Hover angewendet werden, und CSS-Stile müssen direkt mit javascript/jquery und nicht über Stylesheets oder $(this).addClass('someStyle') angewendet werden, da ich die DOM-Elemente in injiziere eine andere Seite.

Wir können die üblichen CSS-Stile anwenden mit

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

Wie sollten wir die CSS-Stile für :hover Ereignisse hinzufügen?

---

Müssen wir zurückgreifen:

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

Answer 1

I MouseEnter- finden Verwendung und Leave als Hover besser zu sein. Es gibt mehr Kontrolle.

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

Answer 2

Versuchen Sie folgendes:

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

oder mithilfe von Klassen

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

Mehr Infos hier .hover() und .toggleClass()

Answer 3

Sie sollten sie in einem hover Ereignis setzen:

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

Allerdings empfehle ich Ihnen, Ihr CSS vollständig in Klassen zu platzieren und diese Klassen in JS zu verwenden. Sie sollten die Sprachen so weit wie möglich aufteilen.

Answer 4

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

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