The pseudo-class: hover does not work

Navigation
2

I am trying to place the effect: hover to these images, but it does not work, they are several images, then I gave a name to the class "effect" but I do not know why it does not work, I want to give it an opacity, below I show how I am doing. 

img .efecto:hover {
  opacity: 0.2; 
}
 <div class="row">

    <div class="offset-lg-2 col-lg-3 col-md-3">
      <h4 class="texto_servicios">IDENTIDAD</h4>
      <img src="imagenes/c1.png" class="img-fluid d-none d-lg-block float-right" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>

    <div class="col-lg-3">
      <h4 class="texto_servicios">PUBLICIDAD</h4>
      <img src="imagenes/c2.png" class="img-fluid d-none d-lg-block float-right " data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample1">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>

    <div class="col-lg-3">
      <h4 class="texto_servicios">DISEÑO WEB</h4>
      <img src="imagenes/c3.png" class="img-fluid d-none d-lg-block float-right " data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample2">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>
    
   </div>
    
asked by linjai 19.08.2018 в 05:28
source

2 answers

6

The problem is that in your css you are using the pseudo-class :hover in the child tags of the label img that have the class .efecto .

How the img tag can not have tags inside this will not work and if it did it would not apply the effect to img but to its daughters

The css should be like that so that it works 

.efecto:hover {
  opacity: 0.2; 
}

and the images like this 

<img src="ejemplo.jpg" class="efecto">

This is the functional example 

.efecto:hover{
  opacity:.5
}
<img class="efecto" width="200px" src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Fpeopledotcom.files.wordpress.com%2F2018%2F04%2Floki_the_sphynx-01_1.jpg%3Fw%3D1800&w=800&q=85">
    
answered by 19.08.2018 / 05:32
source
2

Observations for CSS

If you are going to link the child of a label, space is left, example:

For the next element or tag:

HTML 

<div>
    <article></article>
</div>

To style the content of the <article> tag in CSS would be: 

div article{
    // aquí los estilos...  
}

Now, if you are going to link tags with attributes or properties that are on the same level, that is, they are within the same element or object of the DOM, then you should not leave space. Example: 

<div class="efecto"></div>

From the CSS you should link it as follows: 

div.efecto{
    // aquí los estilos...
}

If you notice, when calling from CSS no spaces are left, then the property class="efecto" is within the same tag <div>

That is the error you have in your code.

I leave you an example that you can run and see the effect so that you apply it to your code.

  

Keep in mind that there is a space between [div] e [#imagen] . 

div #imagen:hover{
  opacity: 0.2;
}
<div>
  <img src="http://placeimg.com/256/192/any" id="imagen">
</div>
    
answered by 19.08.2018 в 07:57
How to know if a string starts with certain characters Detect contour of a [closed] card