收藏
回答

求助 button组件中hover-class不生效问题


初学者,碰上hover不生效的问题 折腾俩小时了 还是不清楚哪的问题,麻烦大神帮点拔下,不胜感激~~

WXML:


<view class="bottom">

<button class="btnGroup">

<button class='btn-item white' hover-class='shadow'>9</button>

<button hover-class='shadow' class='btn-item white'>8</button>

<button hover-class='shadow' class='btn-item white'>7</button>

<button hover-class='shadow' class='btn-item orange'>*</button>

</button>

</button>

</view>

WXSS:


.btnGroup {

display: flex;

flex-direction: row;

padding-left: 0;

padding-right: 0;

border-radius: 0;

}


.btn-item {

width: 189rpx;

text-align: center;

line-height: 150rpx;

border-radius: 0;

}

.white {

background: #EFEFED;

}


.orange {

background: #FC9504;

}


.gray {

background: #CFCFCF;

}


icon {

position: absolute;

left: 60rpx;

top: 37rpx;

}


.shadow {

background: #000;

}





最后一次编辑于  2018-12-04  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • sheng
    sheng
    2018-12-04

    <button class="btnGroup">改为view,外层的button覆盖了内层button的点击,点击不到内层button,所以不会变色


    <view class="bottom">

       <view class="btnGroup">

           <button class='btn-item white' hover-class='shadow'>9</button>

           <button class='btn-item white' hover-class='shadow'>8</button>

           <button class='btn-item white' hover-class='shadow'>7</button>

           <button class='btn-item orange' hover-class='shadow'>*</button>

       </view>

    </view>



    2018-12-04
    赞同
    回复 1
    • 他的、国
      他的、国
      2018-12-04

      非常感谢 已经调试成功 ~~ 谢谢

      2018-12-04
      回复
  • 孤独的仙人掌🌵
    孤独的仙人掌🌵
    2018-12-04

    <view class="bottom">

    <button class="btnGroup">????

    <button class='btn-item white' hover-class='shadow'>9</button>

    <button hover-class='shadow' class='btn-item white'>8</button>

    <button hover-class='shadow' class='btn-item white'>7</button>

    <button hover-class='shadow' class='btn-item orange'>*</button>

    </button>???

    </button>???

    </view>

    基础要加强啊,哪有人用button去包裹button的?而且还多了个结束标签

    2018-12-04
    赞同
    回复 1
    • 他的、国
      他的、国
      2018-12-04

      谢谢您  代码没有完全复制  我会努力打好基础的

      2018-12-04
      回复