Css 冲突的悬停伪类

在这种情况下，我使用悬停伪类修改元素，无论是在其父元素悬停时还是在其上悬停时。不幸的是，它们有一个相互冲突的属性（两个都试图定义属性

transform

），这就是为什么--我假设--当按钮悬停在上面时，缩放不起作用，但光标改变了。仅仅使用CSS有解决办法吗

正文{
溢出：隐藏；
}
#行动小组{
对齐项目：居中；
框大小：边框框；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
填充：20px 20px 20px 20px；
位置：绝对位置；
右：0；
转化：translateY（-50%）；
最高：50%；
}
#操作面板：悬停。操作按钮{
不透明度：1；
变换：translateX（0）；
}
.行动按钮{
背景颜色：浅蓝色；
边界半径：25px；
高度：50px；
边缘底部：20px；
不透明度：0；
过渡：不透明度200ms缓进缓出，变换200ms缓进缓出；
转换：translateX（计算（100%+20px））；
宽度：50px；
}
.操作按钮：悬停{
光标：指针；
变换：translateX（0）比例（1.2）；
}
.操作按钮跨度{
字体大小：30px；
左：50%；
位置：相对位置；
转换：翻译（-50%，-50%）；
最高：50%；
}

三维旋转
比较箭头

通过在其前面添加

#操作面板

来增加以下样式的特殊性。在代码中，父对象的悬停样式覆盖了子对象的悬停样式

 #action-panel .action-button:hover {
  cursor: pointer;
  transform: translateX(0) scale(1.2);
}

正文{
溢出：隐藏；
}
#行动小组{
对齐项目：居中；
框大小：边框框；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
填充：20px 20px 20px 20px；
位置：绝对位置；
右：0；
转化：translateY（-50%）；
最高：50%；
}
#操作面板：悬停。操作按钮{
不透明度：1；
变换：translateX（0）；
}
.行动按钮{
背景颜色：浅蓝色；
边界半径：25px；
高度：50px；
边缘底部：20px；
不透明度：0；
过渡：不透明度200ms缓进缓出，变换200ms缓进缓出；
转换：translateX（计算（100%+20px））；
宽度：50px；
}
#操作面板。操作按钮：悬停{
光标：指针；
变换：translateX（0）比例（1.2）；
}
.操作按钮跨度{
字体大小：30px；
左：50%；
位置：相对位置；
转换：翻译（-50%，-50%）；
最高：50%；
}

三维旋转
比较箭头

Wow，我确实尝试过这个，但我在

之前定义了
#动作面板。动作按钮：悬停
#动作面板：悬停。动作按钮

，但它不起作用。