Hover changes the next

HTML

<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>1</span>
</div>

CSS

body {font-size:5em;}
div {position:relative;}
span {display:inline-block;width:1em;height:1em;text-align:center;border-radius:1em;}
span:nth-of-type(1) {color:transparent;}
span:nth-of-type(1):hover + span, span:nth-of-type(1):focus +span{background:red;color:white;}
span:nth-of-type(2):hover + span,span:nth-of-type(2):focus +span{background:green;color:white;}
span:nth-of-type(3):hover + span, span:nth-of-type(3):focus+span{background:blue;color:white;}
span:nth-of-type(4) {position:absolute;left:0;z-index:-1;}