jQuery/Javascriptを使用してホバーのCSS属性を追加する

Question

いくつかのCSSスタイルは、ホバーの要素に適用する必要があり、スタイルシートや$(this).addClass('someStyle')を使わずにjavascript/jqueryを直接使用してCSSスタイルを適用する必要があります。別のページ。

我々は:hoverイベントのためにCSSスタイルを追加する必要がありますどのように

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

を使用して通常のCSSスタイルを適用することができますか？

---

我々はに頼る必要があります：私はホバーよりも優れていることがMouseEnterイベントとmouseleaveを使用して見つける

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

Answer 1

。より多くのコントロールがあります。

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

Answer 2

これを試してみてください：

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

または使用してクラス

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

ここ

詳細情報.hover()と.toggleClass()

あなたは hoverイベントに入れなければならない

Answer 3

：

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

しかし、私は完全にクラスで自分のCSSを入れて、JSでこれらのクラスを使用することをお勧めします、あなたはできるだけ多くすることができますように言語を分割する必要があります。

Answer 4

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

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