Le hover de liaison désactive l'opacité

Question

J'ai la section suivante avec une image de fond png avec une grande transparence. Je l'ai fait de cette façon parce que je ne sais pas comment utiliser la fonction d'opacité. J'ai même échoué à faire changer la couleur de lien de stationnaire au travail. Je suppose qu'il y a quelque chose qui ne va pas avec la syntaxe css.

Quoi qu'il en soit, ce que je veux vraiment, c'est désactiver l'opacité de l'image d'arrière-plan lorsque la souris passe sur le lien. Comment puis-je faire cela?

https://jsfiddle.net/h0b8e3t2/

<!-- Jobs --> 
      <section id="jobs" class="wrapper style5"> 
       <div class="inner"> 
       <a href="#" target="new"><p><strong>Would You Like To Join Our Team?</strong></p></a> 
       </div> 
      </section> 

.wrapper.style5 { 
      background-color: #fcf3f7; 
      background-image: url("/images/join.png"); 
      background-repeat: repeat-y; 
      background-size: contain; 
      border-style:solid none none none; 
      border-width: 1,5px; 
      border-color: #a4a4a4; 
      text-align: center; 
      font-size: 50px; 
      line-height: 120%; 
      color: #fff; 


     } 

      #jobs .wrapper.style5:hover {color:#fff} 

Answer 1

Vous pouvez utiliser l'élément pseudo pour résoudre cela, et utiliser une normale, .png non transparent

.wrapper.style5 { 
 
    position: relative; 
 
    border-style: solid none none none; 
 
    border-width: 1, 5px; 
 
    border-color: #a4a4a4; 
 
    text-align: center; 
 
    font-size: 50px; 
 
    line-height: 120%; 
 
    color: #fff; 
 
} 
 

 
.wrapper.style5 a::before, 
 
.wrapper.style5 a::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #fcf3f7; 
 
    z-index: -1; 
 
} 
 
.wrapper.style5 a::after { 
 
    background: url(http://lorempixel.com/500/200/nature/1/); 
 
    background-repeat: repeat-x; 
 
    background-size: contain; 
 
    opacity: 0.1; 
 
} 
 

 
.wrapper.style5 a:hover { 
 
    color: #fff; 
 
} 
 
.wrapper.style5 a:hover::after { 
 
    opacity: 1; 
 
}

<!-- Jobs --> 
 
<section id="jobs" class="wrapper style5"> 
 
    <div class="inner"> 
 
    <a href="https://docs.google.com/forms/d/e/1FAIpQLScerklD64H1kq9lz2UK58fJXhyWllJf-_ISCfFV4ew5A538VQ/viewform" target="new"> 
 
     <p><strong>Would You Like To Join Our Team?</strong></p> 
 
    </a> 
 
    </div> 
 
</section>

---

Basé sur un commentaire mis à jour avec un 2: nd échantillon

.wrapper.style5 { 
 
    position: relative; 
 
    border-style: solid none none none; 
 
    border-width: 1, 5px; 
 
    border-color: #a4a4a4; 
 
    text-align: center; 
 
    font-size: 50px; 
 
    line-height: 120%; 
 
    color: #fff; 
 
} 
 

 
.wrapper.style5 a::before, 
 
.wrapper.style5 a::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #fcf3f7; 
 
    z-index: -1; 
 
} 
 
.wrapper.style5 a::after { 
 
    background: url(http://lorempixel.com/500/200/nature/1/); 
 
    background-repeat: repeat-x; 
 
    background-size: contain; 
 
    opacity: 0.1; 
 
} 
 

 
.wrapper.style5 a:hover p {   /* changed this */ 
 
    background: #fff;     /* changed this */ 
 
} 
 
.wrapper.style5 a:hover::after { 
 
    /* opacity: 1;       removed this */ 
 
}

<!-- Jobs --> 
 
<section id="jobs" class="wrapper style5"> 
 
    <div class="inner"> 
 
    <a href="https://docs.google.com/forms/d/e/1FAIpQLScerklD64H1kq9lz2UK58fJXhyWllJf-_ISCfFV4ew5A538VQ/viewform" target="new"> 
 
     <p><strong>Would You Like To Join Our Team?</strong></p> 
 
    </a> 
 
    </div> 
 
</section>