Opacity does not work

I have the following code

HTML

<div class="slideShow">
  <div class="boxSlide">
     <img class="aberturaSelect" src="_imgs/_slideShow/1.png" />
     <img class="aberturaSelect" src="_imgs/_slideShow/2.png" />
     <img class="aberturaSelect" src="_imgs/_slideShow/3.png" />
     <div class="anterior">
        <span class="setaSpan"><</span>
        <span class="boxSpan"></span>
     </div>
     <div class="proximo">
        <span class="setaSpan">></span>
        <span class="boxSpan"></span>
      </div>
  </div>
  <div class="contador">
     <span class="contaSlide">1</span>
     <span class="contaSlide">2</span>
     <span class="contaSlide">3</span>
  </div>
</div>

CSS

 * {
     margin:0;
     padding:0;
 }

 div.slideShow {
     position:relative;
     width:100%;
 }
 div.slideShow div.boxSlide {
     position:relative;
     width:100%;
 }
 div.slideShow div.boxSlide img {
     position:absolute;
     left:0;
     top:0;
     opacity:0;
     width:100%;
 }

 div.slideShow div.boxSlide img:first-child {
     opacity:1;
 }

  div.slideShow div.boxSlide div.anterior,
  div.slideShow div.boxSlide div.proximo {
     position:absolute;
     display:block;
     top:140px;
 }


 div.slideShow div.boxSlide div.anterior {
     left:100px;
 }
 div.slideShow div.boxSlide div.proximo {
     right:100px;
 }

div.slideShow div.boxSlide div.anterior span,
div.slideShow div.boxSlide div.proximo span{    
     position: absolute;
     display:block;
     width:30px;
     height:30px;
}

div.slideShow div.boxSlide div.anterior span.boxSpan,
div.slideShow div.boxSlide div.proximo span.boxSpan {
     border:.1px rgba(0,0,0, .5) solid;
     background-color:rgb(200,200,200);
     opacity:0;
     z-index:1;
}


div.slideShow div.boxSlide div.anterior span.setaSpan,
div.slideShow div.boxSlide div.proximo span.setaSpan {
     line-height:30px;
     text-align:center;
     font-weight:bolder;
     cursor:pointer;
     z-index:2;
}

div.slideShow div.boxSlide div span.setaSpan::hover + span.boxSpan {
    opacity:1;
}


 div.slideShow div:nth-child(2) {
     position:relative;
     top:300px;
     width:100%;
 }

 div.slideShow div.contador{
     display:block;
 }

 div.slideShow div.contador span.contaSlide{
     display:inline-block;
     width:30px;
     height:30px;
     line-height:30px;
     text-align:center;
     background-color:rgb(200,200,200);
     cursor:pointer;
     opacity:.7;
 }

div.slideShow div.contador span.contaSlide::hover{
     opacity:1;
 }

When I do:

div.slideShow div.boxSlide div span.setaSpan::hover + span.boxSpan {
    opacity:1;
}

and

div.slideShow div.contador span.contaSlide::hover{
     opacity:1;
 }

Neither works.

Where am I going wrong?