Question

我正在寻找一种自动删除特定事件上设置的样式的方法。也许我忽略了它，但我还没有在jQuery或vanilla 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所有内容，这样会删除{ {1}}。

是的，我知道我可以将值硬编码回默认值 - 不合适！

实现此类功能的最佳方式是什么？

Answer 1

你可以为此做一件事。声明用于悬停和取消悬停的类，例如：

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

然后你可以使用.addClass('hover').removeClass('unhover')之类的。顺便说一下，只有你有绝对属性才有效。

Answer 2

EDITED

如果使用数组是可行的，请参阅解决方案。

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

SEE DEMO

Answer 3

您可以在css上声明多个类并添加或删除它们

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

希望得到这个帮助。

Answer 4

首先，没有$(element)选择器。

您可以创建类并为其提供css属性，并使用jQuery addClass()和removeClass()方法来删除特定事件。

请注意，bind()方法更加稳固，而不是hover()。 Here is working 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 Pseudo-classes ，例如:hover和:active选择器。 Here link for all of them.

删除在特定事件上设置的样式

4 个答案:

EDITED

SEE DEMO