web-dev-qa-db-ja.com

jQuery / Javascriptを介したホバーCSS属性の追加

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

を使用して通常のcssスタイルを適用できます

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

:hoverイベントにCSSスタイルを追加するにはどうすればよいですか？

次の手段に頼らなければなりませんか？

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

Mouseenterとmouseleaveを使用すると、ホバーするよりも優れていることがわかります。より多くの制御があります。

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

これを試して：

$('#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（）

14
Mark Walters

それらを hover イベントに入れる必要があります。

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でそれらのクラスを使用することを完全に推奨します。可能な限り言語を分割する必要があります。

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

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

2
Laz Karimov