微信小程序按钮点击色

hover-class属性

        微信文档上的button有个hover-class属性，是指定按钮 按下去 的样式类，意味着可以设置按钮点击后的背景色，但是文档上说的很模糊，也很简单，其实里面还是有玄机的，先来看看下面的例子：

/// index.wxml

<view class='myView'>

    <button class='myButton' hover-class='button-hover'>点击变色</button>

</view>

/// index.wxss

.myButton {

    width: 100%;

    height: 90rpx;

    background-color: yellow;

}

.button-hover {

    background-color: red;

}

        很简单的样式，点击按钮，改变按钮的背景色，上面已经演示了是没问题的，那么再来看看下面的:

---

/// index.wxss

.myView .myButton {

    width: 100%;

    height: 90rpx;

    background-color: yellow;

}

.button-hover {

    background-color: red;

}

        对比上面wxss，我只加了一个  .myView (加大字体的那个)，.myView .myButton 等价于 .myButton，都是指那个按钮，为何这样写，点击下去按钮不会变红色呢，原因在于微信文档里面没提到的权值问题，下图是网上一张权值计算图：

权值计算图

        内联样式，权值1000；ID选择器，权值100； 类、伪类、属性选择器，权值10； 类型选择器、伪元素选择器，权值1 。

        在权值比较中，有种情况是都选中相同组件，那么样式是由权值大的层叠权值小的。

        .myView.myButton 标签选中那个按钮，.button-hover标签也选中了那个按钮，两者都选中了相同组件，权值大的层叠权值小，.myView.myButton 的权值为20(10+10)，.button-hover 的权值为10，所以.myView.myButton 里的背景色yellow，层叠了 .button-hover的背景色red，所以不会变为红色。

/// index.wxss

.myView .myButton {

    width: 100%;

    height: 90rpx;

    background-color: yellow;

}

.myView .button-hover {

    background-color: red;

}

        如果在.button-hover 前面加上 .myView，那么按钮点击下去，因为权值相同，所以只看代码顺序,红色背景的代码在黄色背景的代码下方，所以红色会覆盖黄色，按钮点击就会变色。

        要如何避免按钮点击样式由于权值问题而被不知不觉间覆盖，我总结了以下：

            1、通用点击色，代码放到所有代码最后面

            2、如果想直接.button-hover就控制点击色生效，按钮就不要太复杂，直接 .类名，这样可以避免权值问题

            3、按钮写的太复杂，要计算好权值，点击色才不会被覆盖

        最后再解释下为何会点击下去才变色，不知道各位有没有发觉，按钮点击下去后，多了一个名为button-hover的类名，这是动态修改的，按钮取消点击后，又会被自动取消掉，可以看看下面：