1

特定のイベントに設定されたスタイルを自動的に削除する方法を探しています。見落としているかもしれませんが、jQuery やバニラ js でそのような機能を見たことがありません。

アイデア：

$(element).hover(function() {
    $(this).css({
        backgroundColor : 'red',
        color : 'white'
    });
}, function() {
    // remove styles set on handlerIn()
}).mousedown(function() {
    $(this).css({
        paddingTop : '+=1px',
        paddingBottom : '-=1px'
    });
}).mouseup(function() {
    // remove styles set on mousedown
});

私が使用している場合$(this).removeAttr('style');、特定のイベントによって設定されたスタイルだけでなく、すべてが削除されます- mousedown/がある場合、mouseupによって設定されたスタイルが削除されhoverます。

はい、値をハードコードしてデフォルトに戻すことができることはわかっています-適合しません!

そのような機能を実現する最良の方法は何でしょうか?

4

4 に答える 4

1

編集済み

配列を使用できる場合は、この解決策を参照してください。

var cssArray = [
    {'background-color':'red','color':'white'},
    {'background-color':'','color':''},    
    {'paddingTop':'+=10px','paddingBottom':'+=10px'},
    {'paddingTop':'','paddingBottom':''}    
]

$('div').hover(function() {
    $(this).css(
        cssArray[0]
    );
}, function() {
    $(this).css(
        cssArray[1]
    ); 
}).mousedown(function() {
    $(this).css(
       cssArray[2]
    );
}).mouseup(function() {
    $(this).css(
       cssArray[3]
    );
});​

デモを見る

于 2012-08-29T07:20:06.257 に答える
1

CSSで複数のクラスを宣言し、それらを追加または削除できます

 $(element).hover(function() {
    $(this).addClass("classHandlerIn");
 }, function() {
    $(this).removeClass("classHandlerIn").addClass("classHandlerOut")
 }).mousedown(function() {
    $(this).addClass("classMouseDown");
 }).mouseup(function() {
    $(this).removeClass("classMouseDown");
 });

この助けを願っています。

于 2012-08-29T07:53:00.270 に答える
1

そのためにできることは 1 つです。ホバーとアンホバーのクラスを次のように宣言します。

.hover {padding: 5px;}
.unhover {padding: 0px;}

その後、同類を使用できます.addClass('hover').removeClass('unhover')。ところで、これは絶対プロパティがある場合にのみ有効です。

于 2012-08-29T07:09:40.143 に答える
0

まず、$(element)セレクターがありません。

クラスを作成して css プロパティを指定し、特定のイベントを削除するために jQueryaddClass()およびremoveClass()メソッドで使用できます。

bind()method は よりもはるかに堅実であることに注意してくださいhover()。ここでjsFiddleが動作しています：

$('#element').bind({
    mouseenter :function() {
        $(this).css({
            'background-color': 'red',
            'color': 'white'
        });
    },
    mouseleave: function() {
       $(this).css({
        'background-color': 'white',
        'color': 'black'
       });
    },
    mousedown: function() {
        $(this).css({
            paddingTop : '+=10px'
        });
    },
    mouseup: function() {
        $(this).css({
            paddingTop : '-=10px'
        });
    }
});​

また、セレクターなどの CSS 疑似クラスを使用することを忘れないでください。ここにそれらすべてのリンクがあります。:hover:active

于 2012-08-29T07:25:39.137 に答える