Question

在用于悬停功能的按钮中，我有5种具有不同颜色类型的css类，在我的页面中可能有5种具有不同类的按钮。当我将鼠标悬停在每个按钮上时，应该按照各自的类名称设置颜色，到目前为止，它对我来说还算不错。但是现在我可以看到巨大的代码，我想使其更小。请建议任何人。

$('[class^="button"]').parent().each(function(){
    var parentElement = $(this);
    var buttonfullwidth = $(parentElement).hasClass('buttonfullwidth');
    var buttonfullwidth_1 = $(parentElement).hasClass('buttonfullwidth_1');
    var buttonfullwidth_2 = $(parentElement).hasClass('buttonfullwidth_2');
    var buttonfullwidth_3 = $(parentElement).hasClass('buttonfullwidth_3');
    var buttonfullwidth_4 = $(parentElement).hasClass('buttonfullwidth_4');

    if(buttonfullwidth_1 !== false) {
        $(parentElement).hover(function(){
            $(this).addClass('buttonfullwidth_1');

        }, function(){
            $(this).removeClass('buttonfullwidth_1');

        });
    }
    if(buttonfullwidth_2 !== false) {
        $(parentElement).hover(function(){
            $(this).addClass('buttonfullwidth_2');

        }, function(){
            $(this).removeClass('buttonfullwidth_2');

        });
    }
    if(buttonfullwidth_3 !== false) {
        $(parentElement).hover(function(){
            $(this).addClass('buttonfullwidth_3');

        }, function(){
            $(this).removeClass('buttonfullwidth_3');

        });
    }
    if(buttonfullwidth_4 !== false) {
        $(parentElement).hover(function(){
            $(this).addClass('buttonfullwidth_4');

        }, function(){
            $(this).removeClass('buttonfullwidth_4');

        });
    }
    if(buttonfullwidth !== false) {
        $(parentElement).hover(function(){
            $(this).addClass('buttonfullwidth');

        }, function(){
            $(this).removeClass('buttonfullwidth');

        });
    }
});

Answer 1

通过使用:hover伪选择器，您需要CSS来完成这项工作

branch1 CSS pseudo-class在用户与指向设备进行元素交互时匹配，通常在用户将鼠标悬停在元素上时触发。

例如，如果您希望此按钮在悬停时变为蓝色：

master

:hover

注意当元素处于悬停状态时如何设置元素的属性。

因此对于您的代码，您只需要使用以下选择器：

.myButton {
  background-color: lightgreen;
}

.myButton:hover {
  background-color: lightblue;
}

以与示例相同的方式进行。

如何在js中制作较小的js代码？

1 个答案: