Conflicting Hover Pseudo Classes - css

Question

I have a situation where I am modifying an element using a hover pseudo class both when its parent is hovered over and when it is hover over. Unfortunately, they have a conflicting property (both trying to define the property transform), which is why -- I assume -- the scaling is not working when the button is hovered over but the cursor change is. Is there a work around using just CSS?
body {
overflow: hidden;
}
#action-panel {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px 20px 20px 20px;
position: absolute;
right: 0;
transform: translateY(-50%);
top: 50%;
}
#action-panel:hover .action-button {
opacity: 1;
transform: translateX(0);
}
.action-button {
background-color: lightblue;
border-radius: 25px;
height: 50px;
margin-bottom: 20px;
opacity: 0;
transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
transform: translateX(calc(100% + 20px));
width: 50px;
}
.action-button:hover {
cursor: pointer;
transform: translateX(0) scale(1.2);
}
.action-button span {
font-size: 30px;
left: 50%;
position: relative;
transform: translate(-50%, -50%);
top: 50%;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="action-panel">
<div class="action-button"><span class="material-icons">3d_rotation</span></div>
<div class="action-button"><span class="material-icons">compare_arrows</span></div>
<div class="action-button"></div>
</div>
Note:
If you cannot tell from the code, you need to move your cursor to the middle of the right edge to see the effects I am describing.

Answer 1

Increased the specificity of the following style by adding #action-panel before it. In your code the hover styles of parent were overriding the hover styles of child.
#action-panel .action-button:hover {
cursor: pointer;
transform: translateX(0) scale(1.2);
}
body {
overflow: hidden;
}
#action-panel {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px 20px 20px 20px;
position: absolute;
right: 0;
transform: translateY(-50%);
top: 50%;
}
#action-panel:hover .action-button {
opacity: 1;
transform: translateX(0);
}
.action-button {
background-color: lightblue;
border-radius: 25px;
height: 50px;
margin-bottom: 20px;
opacity: 0;
transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
transform: translateX(calc(100% + 20px));
width: 50px;
}
#action-panel .action-button:hover {
cursor: pointer;
transform: translateX(0) scale(1.2);
}
.action-button span {
font-size: 30px;
left: 50%;
position: relative;
transform: translate(-50%, -50%);
top: 50%;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="action-panel">
<div class="action-button"><span class="material-icons">3d_rotation</span></div>
<div class="action-button"><span class="material-icons">compare_arrows</span></div>
<div class="action-button"></div>
</div>