1

我正在寻找一种自动删除特定事件上设置的样式的方法。也许我忽略了它，但我在 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时，将删除由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

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

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

然后你可以使用.addClass('hover').removeClass('unhover')和之流。顺便说一句，这仅在您具有绝对属性时才有效。

于 2012-08-29T07:09:40.143 回答
0

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

您可以创建类并为它们提供 css 属性，并与 jQueryaddClass()和removeClass()方法一起使用以删除特定事件。

请注意，bind()方法比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 回答