The ability to stop an element's hover effect when the child is hovered is not currently possible with the CSS selectors that we have, this is as close as we can get without javascript - affecting the child on hover in addition to affecting the parent. This will only work if the child is 100% of the width and height of the parent
In the CSS4 draft there is a parent selector !
which could be used in cases like this as follows:
.parent! .class1:hover {
background: #ffffff;
}
But we don't have that capability yet