微信小程序hover失效的小坑

我们都知道view标签是支持hover-class属性的，但是如果在使用hover-class属性时，对标签view的样式定义是不使用class，而是使用父标签的子元素来定义的话，hover-class就会失效。下面直接上代码。

代码案例

Item.wxml 代码如下：

<view class='bcb-photo'>
  <text>照片 ：text>
  <view hover-class='bcbp_album_hover' class='bcbp-ap bcbp-album'>相册view>
  <view hover-class='bcbp_album_hover' class='bcbp-ap bcbp-photograph' bindtap='photograph'>拍照view>
view>复制代码

Item.wxss 代码如下：

.bcb-photo{ 
 box-sizing: border-box; 
 position: relative; 
 /* width: 640rpx; */ 
 height: 90rpx;  
line-height: 80rpx; 
 padding-top: 20rpx; 
 margin: auto;
}
.bcb-photo>text{ 
 font-size: 28rpx; 
 color: #516379;
 font-weight: 700;
}
//这样定义样式会使hover-class失效
.bcb-photo>view{  
   position: absolute;  
   top: 40rpx;  
   width: 160rpx;  
   height: 50rpx;  
   background: #0091f6;  
   color: #fff;  
   text-align: center;  
   line-height: 50rpx;  
   border-radius: 6rpx;  
   font-size: 28rpx;
}


//这样定义hover-classs就不会失效了
/*
.bcbp-ap{
  position: absolute;
  top: 40rpx;
  width: 160rpx;
  height: 50rpx;
  background: #0091f6;
  color: #fff;
  text-align: center;
  line-height: 50rpx;
  border-radius: 6rpx;
  font-size: 28rpx;
} */
.bcbp-album{
  right: 180rpx;
}
.bcbp-photograph{
  right: 0rpx;
}

// 失效的hover-class
.bcbp_album_hover{
  background: #4697ff;
}

复制代码

转载于:https://juejin.im/post/5b6a9821e51d4534b8587391