on :hover trigger another element on same hierarchy depth

on :hover trigger another element on same hierarchy depth

In a case I'm unable to alter the hierarchy of DOM-element. I'm facing a
situation where I have a button, based on 3 spans (button-left,
button-content, button-right).
<span class="button-left"></span>
<span class="button-content">My button</span>
<span class="button-right"></span>
When .button-content:hover is activated I'd also like to activate
.button-left:hover and .button-right:hover. Can this be done purely by
CSS? I know it can be done using jQuery, but I'm looking for a CSS-only
solution in this case.