Opacity does not work

Asked

Viewed 149 times

0

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?

css3

  • What should happen exactly and what is happening?

1 answer

3


Simple error, use :hover nay ::hover.

 * {
     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 {
    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;
 }
<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">teste</span>
     </div>
     <div class="proximo">
        <span class="setaSpan">></span>
        <span class="boxSpan">teste</span>
      </div>
  </div>
  <div class="contador">
     <span class="contaSlide">1</span>
     <span class="contaSlide">2</span>
     <span class="contaSlide">3</span>
  </div>
</div>

  • :: is only for pseudo classes right?

  • actually Hover is a pseudo class, :: is used in pseudo elements

  • really. You can help me with one more thing: Description at the end of the question

  • This is only possible with javascript, css is not yet able to catch the parent element (maybe in the next version), I’m not with long now, but you can open another question with this question, will answer you fast.

  • thanks, I’ll do it. But first I’ll try with jQuery.

  • If the answer helped you can accept it in the upper left corner, it helps the site and other users. :)

  • Yes it did. Thank you!

Show 2 more comments

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.